A visual CSS box shadow generator with layers
The Box Shadow Generator lets you design CSS shadows by dragging sliders instead of guessing numbers. Stack as many shadow layers as you need, set the offset, blur, spread, colour and opacity of each one, switch any layer to an inner (inset) shadow, and watch a live preview box update on a light, dark or checkerboard background.
Good shadows are rarely a single layer. Polished interfaces usually combine a tight, darker contact shadow with a large, soft ambient one. This tool starts from presets that already look good — soft card, Material-style elevation levels 1 to 5, neumorphic, hard “brutalist” offset, glow and inner shadow — so you can tweak a working design rather than start from zero.
When it looks right, copy the ready-to-paste box-shadow declaration or the equivalent Tailwind CSS arbitrary-value class. Everything runs in your browser, so it is instant, free and private.
How to use the Box Shadow Generator
- Pick a preset such as “Soft” or an elevation level from 1 to 5 to get a sensible starting point.
- Select a layer in the “Shadow layers” list, then adjust Offset X, Offset Y, Blur, Spread, Colour and Opacity with the sliders or by typing exact values.
- Use “Add layer” or “Duplicate layer” to stack more shadows, the arrow buttons to reorder them, and the bin button to remove one. Tick “Inset” for an inner shadow.
- Set the box colour, background and corner radius, and switch the preview between Light, Dark and Checker to test both themes.
- Press “Copy CSS” for the box-shadow declaration, or “Copy class” for the Tailwind version. Tick “Include box colour and radius” for a complete rule.
Box Shadow Generator features
Unlimited-feeling layers
Up to 12 shadow layers with add, duplicate, reorder and remove — the first layer in the list is painted on top, exactly as in CSS.
Slider and keyboard input
Every value has a slider for quick exploring and a number box for exact pixels, including negative offsets and spread.
Ten tuned presets
Soft card, five Material-style elevation levels, neumorphic (light or dark, depending on the preview), hard brutalist, glow and inner shadow.
CSS and Tailwind output
Clean multi-line CSS plus a Tailwind shadow-[…] arbitrary value with spaces converted to underscores so it works in a class attribute.
Honest preview
The preview uses exactly the CSS you copy, on a light, dark or checkerboard stage.
Private
Nothing is uploaded; the generator works entirely in your browser.
How the CSS box-shadow syntax works
Each shadow layer is written as [inset] offset-x offset-y blur spread colour. Positive X moves the shadow right and positive Y moves it down, so 0 8px 24px suggests light coming from above. Blur softens the edge: the CSS specification describes the result as approximately a Gaussian blur with a standard deviation of half the blur radius, so a 24px blur fades over roughly 24px on each side of the edge.
Spread grows (positive) or shrinks (negative) the shadow before it is blurred. A negative spread with a large Y offset is the secret behind modern “floating card” shadows: the shadow stays under the card instead of leaking out at the sides. A shadow with zero blur and a positive spread draws a crisp ring, which the brutal preset uses as a fake border.
Separate layers with commas. The first layer is drawn on top of the others, and all of them sit behind the element’s background; inset layers are drawn inside the box instead, above the background but below the content.
Tips for natural-looking shadows
- Layer two or three shadows: a small, sharper shadow (1–4px blur) for contact and a larger, faint one (24–48px blur) for ambient light.
- Tint instead of pure black: a dark navy or a darker shade of the background colour looks richer than
rgba(0, 0, 0, …). Use the Color Shades Generator to find one. - Scale with elevation: higher elements get a larger offset and blur but lower opacity.
- Dark themes: shadows barely show on dark backgrounds, so make raised surfaces lighter or add a subtle border.
Material-style elevation levels
The elevation presets are a widely used two-layer approximation of Material Design’s key and ambient shadows. Use them as a consistent depth scale across a design system.
| Level | box-shadow | Typical use |
|---|---|---|
| 1 | 0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.24) | Cards, list items |
| 2 | 0 3px 6px rgba(0,0,0,.16), 0 3px 6px rgba(0,0,0,.23) | Raised buttons, hovered cards |
| 3 | 0 10px 20px rgba(0,0,0,.19), 0 6px 6px rgba(0,0,0,.23) | Dropdowns, menus |
| 4 | 0 14px 28px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.22) | Side sheets, drawers |
| 5 | 0 19px 38px rgba(0,0,0,.30), 0 15px 12px rgba(0,0,0,.22) | Modals and dialogs |
Performance and accessibility notes
A box shadow never changes layout, so you can add one without moving neighbouring elements. Animating box-shadow directly forces the browser to repaint every frame; for smooth hover effects, put the larger shadow on a pseudo-element and animate its opacity instead.
Do not rely on a shadow alone to show focus or state: many people use high-contrast modes where shadows disappear. Pair it with a visible outline or border, and check text and border colours with the Contrast Checker. To round the corners of the same element, try the Border Radius Generator, and for frosted panels see the Glassmorphism Generator.
Box Shadow Generator FAQ
How do I add multiple box shadows in CSS?
List them in one box-shadow property separated by commas, for example box-shadow: 0 1px 2px rgba(0,0,0,.1), 0 8px 24px rgba(0,0,0,.15);. The first shadow is drawn on top. This box shadow generator builds the comma-separated list for you as you add layers.
What is the difference between blur and spread?
Blur controls how soft the shadow’s edge is, while spread changes the shadow’s size before blurring. Positive spread makes it larger than the box, negative spread makes it smaller — useful for shadows that only appear underneath an element.
How do I make an inner shadow?
Add the inset keyword at the start of a layer. In this tool, select a layer and tick “Inset (inner shadow)”. Inset shadows are drawn inside the element and are often used for pressed buttons and input fields.
How do I use a custom box shadow in Tailwind CSS?
Use an arbitrary value: shadow-[0_8px_24px_rgba(0,0,0,0.15)]. Spaces must be replaced with underscores, which the “Copy class” output already does. For a shadow you reuse often, add it to the boxShadow section of your Tailwind theme instead.
Why does my neumorphic shadow look flat?
Neumorphism only works when the element and the background behind it are the same colour, with a darker shadow on one side and a lighter highlight on the other. The neumorphic preset sets both colours for you; if you change the box colour, change the background to match.