CSS Shadow workshop with 3 properties in one UI

What does the CSS Shadow Generator do?

The generator is a workbench for the three CSS shadow properties box-shadow, text-shadow and filter: drop-shadow() in one UI. For each property a live preview shows the result on a fitting demo element: a 280×160 card for box-shadow, a large “Aa” glyph for text-shadow, and an SVG logo with transparency for drop-shadow. You can flip between light and dark background, set the element colour per theme, and tweak values with numeric inputs or sliders.

Up to six layers can be stacked. Per layer you set X and Y offset, blur, and — for box-shadow only — spread and inset. The colour binds to a color picker plus hex text field, so 8-digit hex values with alpha are accepted. Tapping a preset loads a curated stack: flat card, Neumorphism (light/dark), Glassmorphism (card and sidebar), long-hard-shadow 45°, inner-shadow pressed, text engraving, text glow, drop-shadow SVG default, drop-shadow logo heavy.

The output comes in three formats: plain CSS with box-shadow: / text-shadow: / filter: declaration, Tailwind v4 @theme block for class="shadow-{name}" or class="text-shadow-{name}" (via the @utility directive, because Tailwind v4 has no built-in text-shadow utility), and a CSS variable variant with one variable per layer plus a combined token for box-shadow: var(--shadow-{name}).

What are the three use cases?

box-shadow is the classic choice for rectangular elements: cards, buttons, modals, tabs. The property allows spread and inset, which makes it more flexible than the other two. The shadow is drawn along the bounding box — even with rounded corners, the shadow follows the border-radius shape.

text-shadow paints a shadow only behind glyphs, not behind the whole element. No spread, no inset (per CSS spec). Typical use cases: readability halos on photo backgrounds (white text + black 1-px halo = readable on any photo), engraving effects (1 px down light + 1 px up dark), or subtle neon glows on marketing headings.

filter: drop-shadow() runs as a CSS filter and is the only variant that respects the alpha mask. An SVG logo with transparency gets a shadow along the real shape. A PNG with a cut-out background does too. Trade-off: filters are more GPU-expensive than box-shadow, and multiple drop-shadow() calls are written as a space-separated filter chain — not comma-separated like box-shadow.

How does the readability gate read WCAG 2.2?

When text-shadow or drop-shadow is applied to text, the gate checks two axes.

Axis 1 — text vs background: WCAG 2.2 Success Criterion 1.4.3 demands 4.5:1 for body text and 3:1 for large text (≥ 18 pt or 14 pt bold). If the value drops below 3:1, the gate goes full red — no halo can save that, the text or background colour must change. Between 3 and 4.5 the stack is acceptable as large text only.

Axis 2 — shadow vs background: WCAG 2.2 Success Criterion 1.4.11 “Non-text Contrast” demands 3:1 for structural graphic components. If the shadow falls below 3:1 vs background, the halo is decorative rather than structural — when the shadow is supposed to carry text readability (typical for white text on a bright photo), it lacks the contrast for that role. The gate shows an orange-bordered warning.

The generator computes both axes live whenever text, shadow, or background colour changes. The threshold logic follows the W3C algorithm and returns a raw value (e.g. 7.21:1) plus a categorical severity (ok / warn-shadow / warn-text / fail). No other shadow tool in the survey set delivers the gate inline.

What does light-dark() mean as the dark-mode output?

light-dark() is a CSS Color Module 4 function that picks a value based on the active color-scheme. Instead of two separate CSS rules with @media (prefers-color-scheme: dark), you write:

.card {
  box-shadow: 0 4px 8px light-dark(rgba(0, 0, 0, 0.14), rgba(0, 0, 0, 0.56));
}

The function belongs to the Baseline 2024 set and ships in Chrome 123, Edge 123, Firefox 120, and Safari 17.5. Widely-Available status (≥ 30 months of broad coverage) is expected by late 2026 — until then the generator automatically writes an @supports fallback that routes older browsers to two separate rules with a prefers-color-scheme switch.

The toggle in the generator is a single switch. Flip it on and the output block emits both variants — modern and fallback — in the same code box. Copy everything and use it immediately. In dark mode shadows are typically three to four times stronger (higher alpha) because the background colour sits closer to the shadow and the fine layers would otherwise vanish.

Which surface recipes are included?

Three pre-baked recipe types can be loaded per box-shadow stack.

Neumorphism is a design language with two shadows per element. A light shadow falls toward the light source, a dark shadow falls away. The element looks like it was pressed out of the surface. The generator offers eight light-source positions (top-left, top, top-right, right, bottom-right, bottom, bottom-left, left) and a depth slider (2–40 px). Caveat: Neumorphism inherently has low contrast — the readability gate warns actively when the shadows fall below 3:1 against the surface.

Glassmorphism combines backdrop-filter: blur() saturate() with a semi-transparent background. The effect: translucent frosted glass over a colourful background. The generator emits the backdrop-filter chain plus a companion box-shadow for the glass edge. Browser support: backdrop-filter is unprefixed since Safari 18 (2024); before that Safari needed -webkit-backdrop-filter. Performance: backdrop-filter triggers a GPU upload per frame — with many glass-effect elements the frame rate can drop on low-end mobile.

Long-Hard-Shadow is the crisp 45° shadow stack — six layers with increasing offset and falling alpha, no blur. Produces a flat staggered shadow like vintage posters or Material Design long shadows. Pairs well with a bold brand colour as shadow (instead of black), because the hard edge shows colour clearly.

What is a color-coordinated shadow?

Default shadows are often rgba(0, 0, 0, 0.x) — a grey cloud under the element. The anti-pattern: on coloured elements the black shadow looks like it came from another world. The color-coordinated engine derives the shadow from the element colour — same hue, lower lightness (in OKLCH: L − 0.4), reduced chroma (C × 0.6). A red button gets a dark-red shadow, a blue button a dark-blue, a green one a dark-green.

OKLCH is the perceptually uniform color space where equal numeric distances feel equally large. The −0.4 lightness shift is clamped to [0.02, 0.95] so pure black or white elements still cast a visible shadow. The 0.6 chroma reduction prevents the shadow from being as saturated as the element — otherwise it would read as a second layer instead of a shadow.

The generator applies the engine to layer 1 as soon as you click “Apply to layer 1”. Alpha stays at 30 % initially — you can fine-tune it per layer.

What the Tailwind v4 output emits

Tailwind v4 has a CSS-first configuration with the @theme block. For box-shadow the generator registers a --shadow-{name} variable and emits both the arbitrary-value class (class="shadow-[…]") and the token-based class (class="shadow-{name}").

For text-shadow Tailwind v4 has no built-in utility. The generator uses the @utility directive added in Tailwind v4:

@utility text-shadow-heading {
  text-shadow: 0px 1px 0px #FFFFFFCC, 0px -1px 1px #00000080;
}

That makes class="text-shadow-heading" available as a first-class utility. For drop-shadow Tailwind v4 again registers a --drop-shadow-{name} token; the class is class="drop-shadow-{name}" and applies the filter property automatically.

How do permalink and privacy work?

The permalink button encodes the current configuration as a JSON fragment into the URL. Example: …/css-shadow-generator#config={"p":"box-shadow",…}. Browsers load fragments locally — the server never sees the # part. You can bookmark the link, share it in a doc, or paste it in Slack. On open, the generator reconstructs the stack 1:1.

Pure client, no upload, no server, no localStorage, no cookies, no tracking. Closing the tab clears everything. The browser engine computes every shadow locally — even with six-layer stacks the live preview stays smooth on any device less than five years old.