Design · CSS

Box Shadow Generator

Design multi-layer CSS box-shadows interactively. Control every layer — offset, blur, spread, color, and inset — then copy the result as CSS or Tailwind. Everything runs in your browser.

In-browser only CSS · Tailwind Multi-layer shadows

Presets

Preview

Element size

Border radius

Element color

Shadow layers

Output

0 4px 10px 0 rgba(0,0,0,0.25)

Use semi-transparent colors (rgba or hsla) so shadows adapt to any background color.
Combine multiple layers with different blur radii for a more natural depth effect.
Avoid fully opaque black shadows; they look harsh and unrealistic on most designs.
Match shadow direction consistently across your UI — pick a single light source angle.
Test shadows in both light and dark modes; shadows that look great on white can disappear on dark backgrounds.
Use low-spread spread for thin contact shadows and higher blur for ambient shadows.

How to use

Create a box shadow in four steps

1
Start from a preset or a blank layer
Click any preset in the gallery to load it instantly, or start from the default single layer and customise from there.
2
Adjust layer parameters
Expand a layer card to reveal the Offset X, Offset Y, Blur, Spread, Color, and Inset controls. Drag the sliders or type values directly — both update in real time.
3
Add more layers for depth
Click "Add layer" (or press Ctrl/Cmd+N) to stack shadows. Reorder them with the up/down buttons. Toggle layers on/off to compare effects.
4
Copy and paste
Choose CSS value, CSS property, or Tailwind format, then click Copy. The value is ready to paste straight into your stylesheet or component.

Parameter reference

Box shadow parameter guide

Box shadow parameter guide
Parameter	Range	Default	Notes
Offset X	−100 to 100 px	0	Horizontal shadow position; negative values move the shadow left.
Offset Y	−100 to 100 px	4 px	Vertical shadow position; positive values move the shadow down.
Blur radius	0 to 200 px	10 px	Higher values produce softer, more spread-out shadows. 0 gives a sharp edge.
Spread radius	−100 to 100 px	0	Positive values enlarge the shadow; negative values shrink it.
Color	Any RGBA	rgba(0,0,0,0.25)	Use semi-transparent black for natural shadows on any background.
Inset	On / Off	Off	Places the shadow inside the element, useful for pressed states or inner glows.

Tips

Shadow design tips

Layer light and dark shadows for realism

Real-world shadows have soft ambient and sharper contact components. Try a large, low-opacity blur layer combined with a small, slightly higher-opacity layer near the element.
Keep opacity low for subtle elevation

For cards and buttons that sit a few pixels above the page, shadows in the rgba(0,0,0,0.04–0.12) range look natural on both light and dark backgrounds.
Use inset shadows for pressed states

An inset shadow with a small blur and negative spread creates a convincing pressed effect for interactive elements like buttons and toggles.
Test on different backgrounds

Use the preview background toggle to check your shadow on light, dark, and custom-coloured backgrounds before committing to the final values.

Frequently asked questions

How do I create a multi-layer box shadow?

Click the "Add layer" button or press Ctrl/Cmd+N to add layers. Each layer has its own offset, blur, spread, color, and inset settings. The final CSS combines all enabled layers, comma-separated.

What is the difference between spread and blur?

Blur radius softens the shadow edge — larger values create a softer, more diffuse shadow. Spread radius resizes the shadow before blurring — positive values make the shadow larger than the element, negative values make it smaller.

How do inset shadows work?

Inset shadows appear inside the element boundary rather than outside. They are useful for pressed-button states, inner glows, and depth effects where you want the element to appear sunken into the page.

How do I use the Tailwind output?

Select the Tailwind format and copy the value. Paste it as a class in your Tailwind HTML, for example: class="shadow-[0_4px_10px_0_rgba(0,0,0,0.25)]". Tailwind uses underscores in place of spaces inside arbitrary values.

Can I share my shadow design with someone?

Yes. Click the Share button to encode your current shadow configuration into the URL. Copy and paste the URL to share. The recipient's browser decodes the URL and restores your exact design.

How do I undo a change?

Press Ctrl/Cmd+Z to undo. Up to 30 steps of history are stored per session. Press Ctrl/Cmd+Shift+Z to redo. History is lost on page refresh.