Subscribe

CSS Drop Shadow vs Box Shadow

✍️

Understanding the difference between Box shadow vs Drop shadow

20 Aug, 2020 · 2 min read

The other day Josh made a super cool tweet about drop-shadow supporting PNGs. I didn’t know drop shadow supported PNGs, so I decided to give it a go.

HTML Structure

For my example, we are using my favorite Pokémon, “Eevee”, and will place our three Eevee PNGs in a container.

<div class="container">
  <img src="https://i.imgur.com/q3SXJQf.png" />
  <img src="https://i.imgur.com/q3SXJQf.png" class="box-shadow" />
  <img src="https://i.imgur.com/q3SXJQf.png" class="drop-shadow" />
</div>

As you can see, one will be a raw example, one will have a box shadow, and the third will have a drop shadow.

CSS Box Shadow

You probably have seen and used the box-shadow before. It’s a cool feature and adds a shadow to our “box”.

It works like this:

.box-shadow {
  box-shadow: 0px 0px 10px #000;
}

It puts a shadow on the image, but on the box of it.

Box-shadow

CSS Drop Shadow

Then there is a CSS Filter which is fantastic when contouring a PNG!

.drop-shadow {
  filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.5));
}

Drop-shadow

This all will result in the following Codepen.

See the Pen CSS Drop Shadow vs Box Shadow by Chris Bongers (@rebelchris) on CodePen.

Browser Support

As mentioned before, CSS Filters are excellent, but not widely supported yet 😩.

There is a polyfill, but also limited.

CSS Filter support

Thank you for reading, and let’s connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Spread the knowledge with fellow developers on Twitter
Tweet this tip
Powered by Webmentions - Learn more

Read next 📖

Modifying an SVG path with CSS

10 Dec, 2022 · 2 min read

Modifying an SVG path with CSS

Animate an SVG path with CSS

9 Dec, 2022 · 2 min read

Animate an SVG path with CSS

Join 2097 devs and subscribe to my newsletter