Box shadow generator

Layered shadows, glass and soft UI, with the edge and the text measured in both themes.

Press space for a new shadow · lock what to keep

Quarterly report

Revenue grew in every region. The full breakdown is attached.

Quarterly report

Revenue grew in every region. The full breakdown is attached.

In short

Choose Shadow, Glass or Soft UI on the stage and press space for a new surface; lock the colours, the light or the elevation (for glass, the backdrop, the tint or the blur) to keep them. Everything space makes passes the tool’s own checks — text at 4.5:1 at its worst pixel, through the blur for glass, and a 3:1 edge on every side when the surface is a control — unless what you locked rules that out, which the chips then say. Shadows are a five-level scale on one light angle, and the dark twin beside the light surface is lifted and ringed rather than shadowed. The chips under the stage give the edge, the text and the code size; Settings holds the scale, the colours, the layers and the presets. Copy CSS from the bar, or export the full rule with its dark and forced-colours versions, or all five levels as tokens.

What box shadow generator is

A tool that writes the CSS box-shadow property — one or more offset, blurred copies of an element’s outline painted behind it — from sliders instead of by hand. This one builds layered shadows on a five-level elevation scale, makes glass and soft UI from the same engine, and measures whether the result gives the element a visible edge and its text a readable background, in light and dark mode.

What this tool does that others do not

  • The edge, measured on the pixels either side of it

    WCAG 1.4.11 asks for 3:1 between a control and the colours next to it. A shadow changes those colours unevenly, darkening under the bottom edge and barely touching the top, so the tool compares the last pixel of the surface with the first pixel of the page all the way round, side by side, and offers the lightest 1px ring that brings every side to 3:1.

    Tailwind v4’s six shadow sizes on a white card over white reach 1.08:1 to 1.50:1 at their best point and 1.00:1 to 1.03:1 at the top edge.

  • A dark twin that swaps the mechanism

    A shadow works by darkening the page, and a dark page has almost nothing left to darken. The twin lifts the surface by Material’s overlay formula, lighter at each level, adds a ring and a lit top rim, and keeps the shadow only as a residual. It is measured next to the usual fix of raising the opacity.

    On the default card the twin’s weakest side measures 1.67:1; the same shadow with its opacity tripled, on a surface the colour of the page, measures 1.00:1.

  • Glass text read through the blur

    For glass, the backdrop is painted, blurred as backdrop-filter blurs it and tinted, and each line of text is measured at its least readable pixel. The tool gives the tint opacity that passes through the blur and the higher one needed without it, which the export uses as its fallback.

    A white 15% glass with a 20px blur leaves white text at 1.75:1 over hard light and dark bands, and 3.69:1 over a soft mesh gradient.

  • One light source across five levels, exported as tokens

    Each level adds one wider layer to the level below, along the same angle, so the scale reads as a scale. The export writes the five levels as custom properties with a separate shadow-colour token and dark values for both theme hooks, or as Tailwind v4 theme variables.

How to use it

  1. Press space, or pick a kind

    Choose Shadow, Glass or Soft UI on the stage and press space for a new surface; lock the colours, the light or the elevation (for glass, the backdrop, the tint or the blur) to keep them. Each result passes the tool’s own text check, and a control’s 3:1 edge, unless what you locked rules that out. Measured presets are in Settings.

  2. Say what the surface is

    Open the Edge chip and choose Content or A control. A content card is not required to have a 3:1 edge; a text input or a toggle whose outline is how you find it is. The verdict follows the role, and the figure is printed either way.

  3. Shape the scale, then check the dark twin

    In Settings, set the light angle, the first offset, the softness and the opacity, and choose the level. The dark twin sits beside the light surface on the stage (on a phone, switch the stage to Dark twin), and the Edge chip reads its edge beside the opacity-only version.

  4. Export the surface or the whole scale

    Copy CSS from the bar, or use Export for custom properties, Tailwind v4, an inline style, the full rule with its dark twin and forced-colours outline, or all five levels as tokens.

Worked examples

Real input, real figures.

An input field that disappears for low-vision users

You give it

A white field on a #f1f5f9 page with the default four-layer soft shadow and no border.

You get

The edge measures 1.13:1 at the top and 1.59:1 at the bottom, well short of 3:1. A ring in the shadow colour at 47% is the lightest that clears 3:1 on all four sides; the Input field preset ships with one.

Soft UI copied from a popular generator

You give it

neumorphism.io’s default: #e0e0e0, 20px distance, 60px blur, shadows 15% darker and lighter.

You get

The button’s edge measures 1.07:1 at its weakest side and 1.25:1 at its best. Fine for decoration, invisible as a control. Adding a 1px ring in the text colour is the smallest change that makes it one.

Against a typical box shadow generator

AspectdsynA typical box shadow generator
LayersAn eased scale of up to six layers on one light angle, or hand-editedOne layer, or several set independently
Visible edgeMeasured per side against 3:1, with the ring that fixes itJudged by eye
Dark modeA twin that lifts and rings the surface, measured against raising the opacityThe same shadow, or none
GlassText measured at the worst pixel through the blur, with a no-blur fallbackBlur and opacity sliders only
ExportCSS, custom properties, Tailwind v4, inline style, elevation tokens, bytes shownCSS

Guide

What it will not do

  • The shadow’s own rounded corners are approximated, so the edge is measured along the straight part of each side, not round the corners.
  • Glass is measured over a backdrop you choose or upload. A real page scrolls different content behind it, so test over the busiest thing that will sit there.
  • No saturate() or brightness() in the glass filter: browsers disagree on the colour space those run in, so they cannot be measured honestly.
  • An uploaded backdrop stays in the page and cannot travel in the share link; the link opens on a preset backdrop instead.

One light, five levels

A single box-shadow can be tight or wide, not both, so it looks either pasted on or foggy. Real shadows are a tight contact shadow plus a wide, faint one. The scale here doubles each layer’s offset along one angle, blurs it by a multiple of that offset and, from the third layer, pulls it in by half the offset so a wide layer floats rather than glows. Level 3 is level 2 plus one layer, which is what makes the steps read as a scale and lets a hover cross-fade between them cleanly. The cost in bytes is printed beside every export; these are the default scale’s values. In dark mode each level’s surface is lifted by white at Material’s overlay percentage, 4.5 × ln(dp + 1) + 2.

LevelLayersbox-shadow, bytesDark surface lift
12621dp → 5.1%
23992dp → 6.9%
341374dp → 9.2%
451768dp → 11.9%
5621616dp → 14.7%

What a shadow does to the edge

WCAG 2.2’s non-text contrast criterion asks for 3:1 between a control and the colours beside it where the boundary is how you find the control — a text field, a checkbox, a toggle. A shadow changes the colour beside the edge, but unevenly: under the bottom it darkens the page, at the top it barely touches it. Below, Tailwind v4’s six shadow sizes measured by this tool’s engine on a 352 × 150 card, as the lowest and highest ratio between the last pixel of the card and the page beside it.

UtilityWhite on whiteSlate-800 on slate-900
shadow-xs1.01 – 1.081.22 – 1.23
shadow-sm1.03 – 1.231.22 – 1.24
shadow-md1.01 – 1.311.22 – 1.25
shadow-lg1.01 – 1.321.22 – 1.25
shadow-xl1.00 – 1.401.22 – 1.26
shadow-2xl1.02 – 1.501.22 – 1.27

On white, no size reaches 1.6:1 anywhere. On the dark pair the two fills already differ by 1.22:1 and the shadow adds almost nothing, because there is little left below a dark page to darken. A content card is allowed a soft edge; a control is not, and a 1px ring is the cheapest way to give it one. In Windows’ forced-colours mode box-shadow is removed entirely, so the full rule adds an outline for that mode.

Glass, and the text on it

backdrop-filter blurs whatever sits behind the surface, so the text on glass has a different background on every page and at every scroll position. The tool paints the backdrop, blurs it as the browser does and measures each line at its least readable pixel. A light glass that works over a soft gradient can fail over a busy page, and a tint that passes through the blur may not pass without it — which is what a browser without backdrop-filter, or a reader with Reduce transparency on, sees. The export carries that stronger tint behind an@supports test.

Browserbackdrop-filter fromprefers-reduced-transparency
Chrome, Edge76118
Firefox103Behind a preference only
Safari, iOS9 with -webkit-, unprefixed from 18Not supported

Support figures are from MDN’s browser compatibility data, 1 October 2026. For the colours themselves, the contrast checker finds the nearest passing text colour, and the gradient generator makes backdrops measured the same way.