CSS Box Shadow Generator

About this tool

A box-shadow draws a soft shadow around an element, and good designs usually stack several shadows: a thin tight one that anchors the element and a wide soft one that lifts it. Move the sliders for horizontal and vertical offset, blur, spread and opacity, pick a colour, tick Inset to put the shadow inside the box, and add layers with the button; the preview updates as you go. The presets (soft, card, floating, hard offset, inner glow, neon) are starting points. The result is a ready-to-paste CSS declaration and, if you use Tailwind, an arbitrary-value class. You can also paste a box-shadow you already have, in hex, rgb() or named colours with px lengths, and edit it with the sliders. Transparency is written in the modern rgb(r g b / a%) form. We checked the output with the browser itself: 150 random multi-layer values were accepted by Chrome (CSS.supports) and, read back from the computed style, had the same offsets, blur, spread, inset flag and colour as we set. Limits: up to 10 layers, offsets up to 500 pixels (the sliders reach 100, and a pasted value up to 500 is kept), and lengths in pixels only. Pasted shadows may use hex, rgb() or about 60 common colour names. Nothing is uploaded.

How to use it

1. Pick a preset or start with the default layer.
2. Adjust the sliders and colour, and add layers for depth.
3. Optionally paste an existing shadow to edit it.
4. Copy the CSS or the Tailwind class.

Common problems

My pasted shadow was not understood

Only px lengths and hex, rgb() or named colours are read. Convert em or rem lengths and hsl() colours to px and hex first.

The shadow looks too strong

Lower the opacity, or spread it over more layers with less opacity each. Real shadows are soft.

The shadow is cut off

A parent with overflow hidden clips shadows. Give the parent more padding or remove the overflow setting.