NodlumeCSS box shadow generator
Start from one of 7 presets, stack up to 6 layers with offset, blur, spread, color and opacity sliders, and judge the result on a light and a dark surface at once. Copy the box-shadow declaration, the Tailwind class, or a complete sm/md/lg/xl elevation scale as Tailwind v4 @theme tokens. No account needed.
Layers
Elevation scale
Your shadow is md; the other steps scale its offsets, blur and spread by the ratio, the way the theme generator derives a whole system from one base.
shadow-smshadow-mdshadow-lgshadow-xlbox-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
2 layers · press R to shuffle
Layers, not one blur
Stack a tight contact shadow under a wide ambient one, or an inset well under a hairline spread — the shapes real design systems ship, each layer on its own sliders.
Light and dark, together
Both surfaces stay in view while you drag, so a shadow that disappears on a dark card is caught before it ships, not after.
A scale, not a value
Your shadow is md; sm, lg and xl are derived by a ratio you set — the same derivation the theme generator uses, so the copied tokens match a full export.
Box shadows, answered
- What do the box-shadow values mean?
- A box-shadow is offset-x, offset-y, blur, spread, then a color: 0 4px 6px -1px rgb(0 0 0 / 0.1) sits 4px below the box, is blurred over 6px, and is pulled in 1px on every side at 10% black. Add inset in front to paint it inside the box. Several shadows separated by commas stack, first on top.
- Why do designers layer several shadows?
- Real light falls off gradually, and one blur cannot fake that: a single wide shadow looks muddy and a single tight one looks pasted on. Two or three layers whose offset and blur grow together — a tight contact shadow plus a wide ambient one — read as depth. The Layered preset is that recipe; every preset here is the same idea at a different distance.
- How do I use this shadow in Tailwind?
- Copy the Tailwind output and use it as a class: shadow-[0_4px_6px_-1px_rgb(0_0_0_/_0.1)]. Spaces become underscores because a class name cannot contain them. To make it the project's default instead, copy the @theme output into globals.css — Tailwind v4 maps --shadow-md to the shadow-md utility, so every card already using shadow-md restyles at once.
- What is the elevation scale?
- Your shadow becomes md, and sm, lg and xl are derived by scaling its offsets, blur and spread by a ratio (1.5 by default): lg is one step further from the surface, xl two. Colors are left alone. It is the same derivation the theme generator uses for a whole design system, so a shadow that looks right here looks right at every elevation.
- Why is my shadow invisible in dark mode?
- A 10% black shadow on a near-black background has nothing to darken. Judge the dark preview separately: raise the opacity, or keep the shadow light and add a 1px spread layer at low opacity as a subtle border, which is how most dark UIs fake elevation. A shadow tuned only on white almost always vanishes.
Elevation is one token of a design system
A shadow scale sits beside a palette, a type scale, radii and spacing. The theme generator builds all of them into one Tailwind v4 stylesheet with dark mode derived and checked, and the design system reference explains when each elevation belongs. Continue in Nodlume to carry this shadow into a project as its base elevation.