Box-shadow vs Drop-shadow: the differences in CSS

Posted by

 


When it comes to shadows in CSS, the two most common players arebox-shadow anddrop-shadow. At first glance, they might seem interchangeable, but in reality, they work in different ways and serve specific purposes.

🔗 Do you like Techelopment? Take a look at the site for all the details!

1. box-shadow

Definition:
box-shadow is a CSS property that applies a shadow to the entire box of the element, following the rectangular edges (or rounded edges if border-radius is present).

Syntax:

box-shadow: offset-x offset-y blur-radius spread-radius color inset;
  • offset-x / offset-y → shadow position
  • blur-radius → blur (higher = softer)
  • spread-radius → expands or contracts the shadow
  • color → shadow color
  • inset (optional) → inner shadow instead of outer shadow

Example:

.card {
  box-shadow: 4px 6px 10px rgba(0,0,0,0.3);
}

Features:

  • Works on any HTML element.
  • Does not take content transparency into account: the shadow follows the shape of the box, not the visible pixels.
  • Supports multiple separate shadows with the same property.

2. drop-shadow()

Definition:
drop-shadow() is a filter function (filter: drop-shadow(...)) that applies a shadow based on the visible shape of the element, taking any transparency into account.

Syntax:

filter: drop-shadow(offset-x offset-y blur-radius color);

Example:

.icon {
  filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.4));
}

Features:

  • Perfect for PNG/SVG images with transparent backgrounds: the shadow follows the opaque edges of the image, not the rectangular box.
  • It does not have spread-radius and does not support inner shadows.
  • Can be combined with other filters (e.g. blur, brightness, etc.).
  • More expensive in terms of performance, because it must calculate transparent pixels.

3. Main differences

Feature box-shadow drop-shadow()
Type CSS Property Filter Function
Shadow Area Box Borders Visible Pixels of Element
Transparency Support No Yes
Spread-radius Yes No
Inner Shadow Yes (inset) No
Performance Fastest Heaviest (pixel-level)
Typical Usage Cards, boxes, buttons PNG/SVG icons, irregular elements

4. When to Use What

  • Use box-shadow for elements with rectangular or regular shapes (cards, modals, buttons).
  • Use drop-shadow() when you need the shadow to follow the actual shape of an element with transparency (icons, cut-out shapes, images without a background).

Comparative example:

HTML (to be inserted into the page):

<img class="box" src="logo.png" alt="Logo with box-shadow">
<img class="drop" src="logo.png" alt="Logo with drop-shadow">

CSS:

.box {
  box-shadow: 5px 5px 10px rgba(0,0,0,0.9);
}

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

➡️ With a transparent PNG, the box-shadow will display a shadow rectangle, while drop-shadow() will follow the actual contours of the logo.



💡Final Tip

If you want a "realistic" shadow on irregular elements (like a character's silhouette), drop-shadow() is the key. If you want consistency and performance in complex layouts, box-shadow is safer.




Follow me #techelopment

Official site: www.techelopment.it
facebook: Techelopment
instagram: @techelopment
X: techelopment
Bluesky: @techelopment
telegram: @techelopment_channel
whatsapp: Techelopment
youtube: @techelopment