We have heard of the box-shadow
property in css which is used to add drop shadows to our html elements. The following figure shows a div without a drop-shadow (A) and a div with a drop-shadow (B). The drop-shadow property applied is box-shadow: 2px 2px 8px grey;

Also you might have noticed that the drop-shadow
fails when applied to texts and images. We don't always get the expected results in those cases.

But with a little tweak to the css code we can get the job done.

I’ll tell you how.
Text shadow
Whenever we need a shadow on a text element, using the text-shadow
property instead of the box-shadow
will fix the box issue and will result to a pleasing shadow effect.
text-shadow: 2px 2px 8px grey;
Image shadow
Box shadow treats each image as a box and applies a shadow defining its box edges. If your image isn't a box or rectangular shaped, then box-shadow fails. The solution is pretty simple.
filter: drop-shadow(2px 2px 8px grey);
Applying filter: drop-shadow will use the original image and detect it's correct image boundary without considering it as a box. So it works like a charm
Other filter types
As we came through the filter property in the previous section, You might be curious about the other types of filters that we can use in css. There are many. But the following are the most popular ones.
- filter: blur
- filter: brightness
- filter: grayscale
- filter: opacity
filter: blur(2px);
filter: grayscale(0.9);
filter: opacity(0.2);
filter: brightness(1.2);

In the above figure, leftmost is the original image and the 2nd, 3rd, 4th and 5th images represent the above filter properties respectively.
I recommend you to play around with those nice properties as well. Happy styling!