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