box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px rgba(0, 0, 0, 0.14), 0 1px 5px rgba(0, 0, 0, 0.12);
shadow-[0_3px_1px_-2px_rgba(0,0,0,0.2),0_2px_2px_rgba(0,0,0,0.14),0_1px_5px_rgba(0,0,0,0.12)]
Box Shadow Generator runs entirely in this page: your files and inputs never leave your device.
Related tools
- CSS Gradient GeneratorBuild linear, radial, and conic CSS gradients visually, pick the interpolation color space, and copy the CSS.
- CSS Anchor Positioning BuilderBuild CSS anchor-positioned tooltips, menus, and popovers with flip fallbacks and a plain-CSS fallback.
- Cubic Bezier Easing EditorDrag the control points of a CSS easing curve, watch it animate, and copy the cubic-bezier or linear() value.
- Clip Path GeneratorDrag shape handles over your own image and copy the matching CSS clip-path or SVG path.
- CSS Keyframes BuilderBuild @keyframes animations on a visual timeline, preview them live, and copy the CSS with a reduced motion guard.
- Fluid Clamp CalculatorTurn a min and max size into a responsive CSS clamp() expression, with a preview at six viewport widths.
What it does
Builds a CSS box-shadow out of as many layers as you want, each with its own offsets, blur, spread, color, opacity, and inset flag. Layers can be added, removed, and reordered, which matters because a box-shadow paints the first layer on top. A pasted value is read back into editable layers, so an existing shadow can be adjusted rather than rebuilt, and the preview draws the result on a light card and a dark card side by side.
How to use it
Start from a preset or paste a value you already have, then adjust the sliders for each layer. Use the color field for the hue and the opacity slider for the alpha, since a native color input cannot carry transparency. Copy the CSS declaration or the Tailwind arbitrary value from the buttons under the output, and switch the color syntax if your codebase prefers hex alpha or the modern slash notation.
Why this one
Most shadow generators give you one layer, which is the wrong shape for a good shadow: real depth comes from a tight contact shadow under a wide soft one. This one is built around a layer list, ships the Material elevation values and the neumorphic and hard offset shapes as presets, previews on both themes because a shadow tuned on white usually disappears on dark, and reads an existing value back so you can edit what you already shipped. It runs entirely in the page, so your files and inputs never leave your device.
FAQ
- Why does my shadow look wrong on a dark background?
- A black shadow at low opacity has almost nothing to darken once the surface behind it is already dark, so the element stops reading as raised. The usual fixes are to raise the opacity, to tint the shadow toward the page background rather than pure black, or to swap the shadow for a lighter top border, which is how surfaces are separated in dark themes. The preview here draws the same value on both fields so the difference is visible before you ship it.
- What does the spread radius actually do?
- Spread grows or shrinks the shadow shape before the blur is applied, following the border radius as it goes. A positive spread with zero blur draws an even outline, which is how a focus ring is built out of box-shadow. A negative spread pulls the shadow in on all sides, which is the trick behind a shadow that appears to sit under an element rather than around it.
- Can I use this with Tailwind?
- Yes. The Tailwind output is an arbitrary value like shadow-[0_1px_2px_rgba(0,0,0,0.1)]. Tailwind class names cannot contain spaces, so every space in the CSS value becomes an underscore, and the layers are joined by plain commas. If you use the shadow in more than one place, paste the CSS value into a theme entry instead and keep the utility for one-offs.
Keyboard shortcuts: press ? anywhere on this page to see them.