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;

Drop shadow using a css box-shadow

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.

Drop shadow using a css box-shadow

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

Drop shadow using css text-shadow|filter properties

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.

  1. filter: blur
  2. filter: brightness
  3. filter: grayscale
  4. 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!