Drop-shadow

Learn Alpine shadow with drop-shadow().

drop-shadow() hugs the real shape

drop-shadow() is a shadow function that lives under the filter umbrella. Its shape is drop-shadow(4px 4px 8px rgba(0,0,0,0.5)): horizontal shift, vertical shift, blur radius, then color.

While box-shadow traces the element's box, drop-shadow() hugs the real shape. For a logo or icon on a transparent background, this is the right tool.

Shadows for icons and SVG drawings

Picture a transparent SVG icon: a star, a heart, a speech bubble. box-shadow draws the shadow around the rectangle that bounds the icon; the corners show a square halo.

drop-shadow() instead follows the real outline. It traces the star's tips and the heart's curves with a thin shadow. This is why it is almost always the pick for icon sets and drawings.

Multiple drop-shadow calls

You can call drop-shadow() more than once in the same filter declaration. Each call adds a shadow layer; separate them with a space.

For example filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3)) drop-shadow(0 4px 8px rgba(0,0,0,0.2)) draws a nearby thin shadow and a distant soft one. This trick helps icons feel grounded on the page.

Exercise Give the logo a single drop-shadow

Write a filter declaration for the .logo selector. It should hold a single drop-shadow(2px 2px 4px rgba(0,0,0,0.4)) call.

Show example solution

/* logo shadow */
.logo {
  filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.4));
}

Test yourself

Which is best for a logo on a transparent background?
```
.logo {
  filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.4));
}
```
- box-shadow: 2px 2px 4px rgba(0,0,0,0.4)
- filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.4))
- text-shadow: 2px 2px 4px rgba(0,0,0,0.4)
- outline: 2px solid rgba(0,0,0,0.4)
Show answer

filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.4)) — Correct. drop-shadow() skips the transparent areas and traces the real shape.

Give the logo a shape-following shadow

.logo {
  filter: ____;
}

Show answer

.logo {
  filter: drop-shadow(4px 4px 8px rgba(0,0,0,0.4));
}

Match each parameter to its slot

First value

Horizontal shift
Second value

Vertical shift
Third value

Blur radius
Fourth value

Color

Next lesson: Mix-blend-mode

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies