Build a box shadow layer by layer
This box shadow generator writes the CSS <code>box-shadow</code> property for you. Stack as many shadow layers as you need, adjust each one's horizontal and vertical offset, blur, spread, color and opacity, switch it to an inset shadow, and watch the preview box update on any background. Start from presets for soft shadows, Material-style elevation, neumorphism, hard offsets and glows, then copy the CSS or a Tailwind <code>shadow-[…]</code> class. Paste an existing shadow to edit it. It all runs in your browser.
How to create a CSS box shadow
- 1Pick a preset close to what you want, or keep the default layered shadow.
- 2Select a layer and set its X and Y offset, blur, spread, color and opacity. Turn on Inset to draw it inside the box.
- 3Use Add layer, duplicate, reorder and hide layers to combine several shadows.
- 4Change the preview's background, box color, corner radius and size to match your design.
- 5Copy the CSS or the Tailwind class.
The box-shadow values explained
- Offset X and Y
- How far the shadow is moved right and down. Negative values move it left and up. A light source above the page means a positive Y offset.
- Blur radius
- How soft the edge is. 0 gives a sharp copy of the box; larger values spread the shadow over a wider, fainter area. It cannot be negative.
- Spread radius
- Grows or shrinks the shadow before it is blurred. A negative spread with a large blur keeps a soft shadow from peeking out at the sides, which is the trick behind most "soft" shadows.
- Color
- Usually black or a dark tint of the background at low opacity. Tinting the shadow with the background hue looks more natural than pure grey.
- inset
- Draws the shadow inside the border instead of outside, so the box looks pressed in. Inset and outer shadows can be mixed in one declaration.
Why layer several shadows?
Real shadows have a dark, tight core where an object nearly touches the surface and a soft, wide penumbra further out. One box-shadow layer can only draw one of those. Stacking two to five layers with doubling offsets and blurs, each at low opacity, gives the smooth, realistic depth used by modern design systems. The Layered smooth preset is exactly that.
Layers are painted front to back: the first one in the list sits on top. Reorder them with the arrow buttons and hide a layer with the eye icon to see what it contributes. Hidden layers are left out of the copied CSS.
Elevation, neumorphism and other styles
The Elevation 1–5 presets follow the classic Material Design card shadows: each level pairs an ambient shadow with a key shadow, lifting the card further from the page.
Neumorphism uses two shadows on a box the same color as its background: a dark one offset down and right, a light one offset up and left. It only works when the box and background colors match, so the preset sets both. Hard offset drops the blur entirely for a flat, brutalist look, and Glow uses a zero offset with a colored shadow for focus rings and neon effects on dark backgrounds.
Box shadows in Tailwind CSS
Tailwind's built-in shadow-sm to shadow-2xl cover the common cases. For anything else, the generator writes an arbitrary value such as shadow-[0_10px_30px_-5px_rgba(0,0,0,0.15)]: spaces become underscores because class names cannot contain spaces, and the class works in Tailwind 3 and 4 without editing your config.
Pair a shadow with a background from the CSS gradient generator, or check that text on your card stays readable with the contrast checker.
Shadows and performance
Large blur radii are drawn by the GPU in all current browsers and are cheap on static elements. Animating box-shadow repaints the element on every frame, though; to animate depth on hover, put the larger shadow on a pseudo-element and animate its opacity instead.
Frequently asked questions
- What is the syntax of box-shadow?
- box-shadow: [inset] offset-x offset-y [blur] [spread] color;. Only the two offsets are required. Separate several shadows with commas, for example box-shadow: 0 1px 2px rgba(0,0,0,.1), 0 4px 8px rgba(0,0,0,.1);.
- How do I make a soft, subtle shadow?
- Use a low-opacity black (10–20%), a large blur, a small Y offset and a negative spread, such as 0 10px 30px -5px rgba(0,0,0,0.15). Layering two or three such shadows looks smoother still.
- How do I put a shadow on only one side?
- Offset the shadow towards that side and use a negative spread about as large as the blur so it does not show on the other sides, for example 0 8px 6px -6px rgba(0,0,0,0.3) for a bottom-only shadow.
- What does inset do?
- inset draws the shadow inside the box instead of behind it, making the element look pressed into the page. It is common on input fields and pressed buttons.
- What is the difference between box-shadow and drop-shadow?
- box-shadow follows the element's box and border radius. The filter: drop-shadow() function follows the actual visible pixels, such as the outline of a transparent PNG or an SVG icon, but has no spread and no inset.
- How do I use a custom box shadow in Tailwind?
- Copy the Tailwind class from the generator, an arbitrary value like shadow-[0_4px_12px_rgba(0,0,0,0.15)], and add it to the element. You can also put the CSS value in your theme's boxShadow settings to give it a name.
- Can I edit a shadow I already have?
- Yes. Paste a box-shadow value, a full declaration or a Tailwind shadow-[…] class into Import. rem and em lengths are converted at 16px.
- Is my CSS sent anywhere?
- No. The generator runs entirely in your browser.