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.
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.
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.
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