Shadows are one of the most misunderstood concepts in CSS, due to that developers usually end up using the wrong approaches for their desired results. There is a lot to know about the box-shadow property, you can create more realistic visual effects using some minor changes without any hassle.

Note: Before you start working with shadows in CSS make sure to read about the following properties.

• h-offset (required): A positive value puts the shadow on the_ right side_ of the box, and a negative value puts the shadow on the_ left side_.
• v-offset (required): Similar to the previous property, a positive value puts the shadow below the box and a negative one puts it above the box.
• blur-radius (optional): Higher the blur-radius, a more blurred shadow will be achieved.
• spread (optional): A positive value increases the size of the shadow and a negative one decreases the size of the shadow.

One-Sided Shadows

Most of the time, people use box-shadow with three lengths and colors. But that results in a complicated shadow that is hard to customize further.

Shadow on Two Opposite Sides

Working with shadows in CSS gets trickier if you want to achieve shadows on different sides of the element, as the spread radius is applied equally on all the sides.

Using Drop Shadows

Developers often get confused between box-shadow and drop-shadow, in CSS we have a filter known as drop-shadow which does some things similar to **box-shadow, **where we can pass in values for x-offset, y-offset, blur radius, and color.

_Note: _It doesn’t have a spread parameter.

There are times when developers have to work with non-rectangular shapes that don’t really hold well with the box-shadow property, and this is where drop-shadow comes into action.

#programming #design #css #shadows