About the CSS Box Shadow Generator
CSS Box Shadow Generator lets you design a shadow by moving sliders and see the result at once on a preview box. Set the horizontal and vertical offset, blur, spread, colour and opacity, switch a layer to inset, and stack up to four layers for the soft, realistic shadows used in modern interfaces. Six presets, Soft, Layered, Sharp, Glow, Inset and Raised, give you a starting point. You can change the page colour, the box colour and the corner radius of the preview to test against your own design. The tool writes the box-shadow declaration in CSS, with each layer on its own line, and can also give you the same shadow as a Tailwind class. Everything runs in your browser.
Updated September 2026
How to use the CSS Box Shadow Generator
- 1Pick a preset, or start with the default soft shadow.
- 2Move the sliders for offset, blur, spread and opacity, and choose the shadow colour.
- 3Tick Inset to draw the shadow inside the box.
- 4Press Add layer to stack another shadow, and choose a layer to edit it.
- 5Change the page and box colours to match your design, then press Copy CSS or Copy Tailwind class.
How a shadow is described
The CSS box-shadow property takes up to six values for each shadow: an optional inset keyword, a horizontal offset, a vertical offset, a blur radius, a spread radius and a colour. Small changes make a big difference to how a card, button or modal looks. A crisp offset with no blur looks like a cut-out, a wide blur with low opacity looks like soft light, and an offset of zero with colour looks like a glow.
Designing this by typing numbers is slow, which is why a preview with sliders is useful: you see the effect at once and copy the code when it looks right.
Recipes that work
- Cards: 0 8px 24px at 10 to 20 percent black, or three stacked layers for depth.
- Buttons: a small 0 2px 4px shadow that shrinks on press to look pushed in.
- Glow: 0 offset, 20 to 30px blur and a bright colour at 50 percent.
- Sharp offset: 6px 6px with no blur for a retro or comic style.
- Pressed look: an inset shadow with a small blur.
Match your design
Shadows look different on different backgrounds, so change the page and box colours in the preview to match your design. On dark pages, black shadows are hard to see, so use a stronger opacity or a coloured glow. A subtle shadow with the same hue as the background often looks more natural than pure black.
The corner radius slider matters because shadows follow the shape of the box. Check the result with your real border radius before you copy the code.
Related tools
Color Converter turns colours between hex, RGB and HSL, Color Contrast Checker tests text against its background, Image Color Picker finds colours from a photo, Add Border to Image applies borders and shadows to pictures and Code Minifier shrinks the CSS you copy.
Features
- Offset, blur, spread, colour and opacity controls
- Up to four stacked layers
- Inset shadows
- Six presets including glow and raised
- Live preview with your own page colour, box colour and corners
- CSS output with one layer per line
- Tailwind arbitrary value output
- Runs in your browser
Frequently asked questions
What does each box-shadow value do?
The first two numbers move the shadow across and down. The third is the blur, which softens the edge. The fourth is the spread, which makes the shadow bigger or smaller than the box before blurring. Then comes the colour, and the word inset at the start draws the shadow inside the box.
How do I make a soft, natural shadow?
Use a large blur, a small vertical offset and low opacity, for example 0 8px 24px with 15 percent black. For a more realistic look, stack two or three layers of increasing size and blur, as in the Layered preset.
Can I use more than one shadow on the same element?
Yes. CSS accepts a comma-separated list of shadows. The first one in the list is drawn on top. This tool lets you add up to four and writes them in that order, so what you see in the preview is what the browser draws.
How do I create an inset shadow?
Select a layer and tick Inset. The shadow is then drawn inside the edges of the box, which gives a pressed or hollow look. Use a small blur and a low opacity for the best effect.
How do I use the result in Tailwind CSS?
Press Copy Tailwind class and add it to the element's class list. It uses an arbitrary value, such as shadow-[0_8px_24px_0_rgba(0,0,0,0.15)], where spaces are replaced by underscores. It works in Tailwind versions that support arbitrary values.
What is the difference between blur and spread?
Blur controls how soft the edge is. Spread grows or shrinks the shadow shape before it is blurred. A positive spread with no blur draws a solid outline, which can be used as a border, and a negative spread with a large blur keeps a shadow narrow under the box.
Do shadows slow down a page?
A few shadows on ordinary elements cost very little. Very large blur values on many moving elements, such as during animation, can slow older devices, so use restraint and prefer a smaller blur when you animate.