Shadows

Blurred shadows are true Gaussian blurs rendered into bitmaps at 300 dpi, drawn underneath content that stays vector and selectable. text-shadow, box-shadow (outer and inset) and drop-shadow() all follow the real shape: a drop-shadow of text or of a PNG with transparent corners is the glyph or image outline, not a rectangle. (docs/html-css-support.md#rasterized-effects)

1 — text-shadow

Hard

3px 3px 0 #9ab

Glow

0 0 6px #4af

Soft

2px 3px 5px rgba(0,0,0,.6)

Fire

three layers, first on top

2 — box-shadow: a real Gaussian, knocked out under the box

0 4px 14px rgba(0,0,0,.45)

transparent box: no shadow shows through

inset 0 0 14px, rounded hole

spread + two layers

3 — filter: drop-shadow() follows the alpha shape

Silhouette

text: shadow is the glyph outline

PNG with transparent corners

inline SVG (not its bounding box)

two drop-shadows chained