See the Pen box-shadow & drop-shadow by qnlz ( on CodePen. See the Pen Drop-shadow vs box-shadow (2) by Kseso ( on CodePen. Lennart Schoors also has a nice write-up with practical examples using tooltips and icons that we previously called out. Let’s cap this off with a few other great examples illustrating that. That means that the spread radius you might specify in box-shadow is not one-to-one with the default spread value for drop-shadow, so the two are not equal replacements of one another in some cases. Update: Amelia identified another key difference in the comments where the spread of the radius for drop-shadow() is calculated differently than box-shadow and even that of text-shadow. There are other differences that distinguish the two in terms of browser support, performance and such, but the way the two treat the box model is the key difference.
![4shadow vs 4shadow vs](https://d1f6f41kywpi5p.cloudfront.net/static/mp3/2b-shabhaye-taar/1e3bbca1-photo_240x180.jpg)
The difference between box-shadow and filter: drop-shadow() really boils down to the CSS box model.
![4shadow vs 4shadow vs](https://i.pinimg.com/236x/cd/42/05/cd4205402499ca371ffe30935ca64d11.jpg)
Hardware accelerated in browsers that support it. Here’s a side-by-side comparison to help distinguish the two and when it might be best to choose one over the other.ĬSS Backgrounds and Borders Module Level 3Ĭalculation is based on the stdDeviation attribute of the SVG filter Like most things in development, the answer of which method to use depends. It’s merely an illustration of their different behaviors in a specific context. The simple example of a triangle above might make it seem that filter: drop-shadow() is better, but it’s not a fair comparison of the benefits or even the possibilities of both methods. See the Pen CSS Caret Drop Shadow by CSS-Tricks ( on CodePen. That means the outline of our triangle is recognized and the transparency around it is ignored so that the intended shape receives the shadow. Take a gander at all the possibilities for adding visual filters on elements and marvel at how CSS suddenly starts doing a lot of things we used to have to mockup in Photoshop.įilters are not bound to the box model. CSS Filter Drop ShadowĬSS Filters are pretty awesome. This was my “ah-ha moment” when understanding the box in box-shadow. Even in cases where the shape of the element does not appear to be a box, the box is still there and that is was box-shadow is applied to. CSS uses a box model, where the element’s edges are bound in the shape of a rectangle. See the Pen CSS Caret Box Shadow by CSS-Tricks ( on CodePen. Box ShadowĪdd a box-shadow on that bad boy and this happens.
![4shadow vs 4shadow vs](https://i1.sndcdn.com/avatars-000246130767-xbidlg-t500x500.jpg)
Let’s use this to break down the difference between the two. See the Pen CSS Caret by CSS-Tricks ( on CodePen. Here’s a simple triangle not unlike the one I made back then. However, the two are different and it’s worth comparing those differences.įor me, the primary difference came to light early on when I started working with box-shadow. Not too long after box-shadow was introduced, a working draft for CSS Filters surfaced and, with it, a method for drop-shadow() that looks a lot like box-shadow at first glance. I still reach for drop shadows often in my work because they add a nice texture in some contexts, like working with largely flat designs. Web designers have loved them for a long time to the extent that we used to fake them with PNG images before CSS Level 3 formally introduced them to the spec as the box-shadow property.