What are the four values in box-shadow?

box-shadow takes horizontal-offset, vertical-offset, blur-radius, spread-radius, and color. The inset keyword appears before the offset values if used.

What does a negative spread value do?

A negative spread radius shrinks the shadow smaller than the element. Combined with a large blur, this creates a focused directional shadow.

What is an inset shadow?

An inset shadow appears inside the element border rather than outside it. It gives the appearance of the element being pressed into the surface.

Neumorphism is a UI design trend that simulates soft extruded plastic by using two shadows per element on a monochromatic background.

How do multiple box-shadow layers work?

Multiple box-shadow values are separated by commas. The first value in the list appears on top. All values are composited by the browser.

What Tailwind classes are equivalent?

Tailwind shadow-sm, shadow, shadow-md, shadow-lg, shadow-xl, and shadow-2xl correspond to increasing blur and spread values.

Can I use rgba colours for shadows?

Yes. Using rgba allows you to set shadow opacity independently of the shadow colour. The opacity slider generates rgba values automatically.

What is the difference between blur and spread?

Blur radius controls how soft the shadow edges are. Spread radius scales the shadow size before blurring.

Does box-shadow affect page layout?

No. box-shadow is rendered outside the element box model and does not affect page layout or trigger reflow.

Can I animate box-shadow?

Yes. box-shadow is animatable with CSS transitions. For better performance, animate filter: drop-shadow() instead.

CSS Box Shadow Generator

New

Create multi-layer CSS box shadows with live preview, 12 presets, and Tailwind equivalents.

Free Forever

No Signup Required

No Files Stored

Presets

X Offset: 0pxY Offset: 4pxBlur: 16pxSpread: 0px

ColorInset

box-shadow: 0px 4px 16px 0px #00000026;

Related Tools

CSS Border Radius Generator

developer

Generate CSS border-radius with simple or elliptical per-corner control and shape presets.

Try it free

CSS Gradient Generator

developer

Build linear, radial, and conic gradients with presets and copy-ready CSS output.

Try it free

Embed this tool

Add this tool to your website or blog with a single iframe snippet.

<iframe src="https://dukotools.com/tools/box-shadow-generator?embed=1" width="100%" height="600" frameborder="0" allow="clipboard-write" loading="lazy" title="box-shadow-generator tool"></iframe>

About CSS Box Shadow Generator

CSS Box Shadow Generator gives designers and developers a visual editor for CSS box-shadow with real-time preview. The preview panel shows a white card on a gray background with the current shadow applied, updating instantly as any control changes. Five sliders control horizontal offset, vertical offset, blur radius, spread radius, and shadow opacity. The inset toggle switches between drop shadows and inner shadows. The multi-layer system is the key feature: the Add Shadow button stacks up to 5 independent shadow layers with individual controls. Twelve pre-designed presets are shown as card thumbnails so you can see the effect before clicking. The output section shows the complete box-shadow property value, the full CSS rule ready to paste, and the Tailwind equivalent class where one exists.

Key Features

Real-Time Preview
Live card preview updates instantly as any shadow control changes.
Five Slider Controls
Horizontal offset, vertical offset, blur, spread, and opacity sliders per shadow layer.
Multi-Layer Shadows
Stack up to 5 independent shadow layers composited in the preview.
Inset Shadow Toggle
Switches between outer drop shadows and inset inner shadows.
12 Design Presets
Pre-designed presets shown as thumbnails with the shadow already applied for instant loading.
Tailwind Class Output
Shows the Tailwind CSS equivalent when applicable.

How to Use

1
Adjust the sliders
Drag the offset, blur, and spread sliders to shape the shadow. Watch the preview update in real time.
2
Pick a colour
Click the colour picker to choose shadow colour and use the opacity slider to control transparency.
3
Toggle inset (optional)
Enable Inset to create a pressed or embossed inner shadow effect.
4
Add more layers (optional)
Click Add Shadow to stack up to 5 layers for complex composite shadow effects.
5
Or load a preset
Click any preset thumbnail to load its configuration into the editor.
6
Copy the CSS
Click Copy to grab the complete CSS rule or just the box-shadow value.

Real-World Use Cases

Component Design

A designer uses the multi-layer editor to create a card component shadow with a subtle coloured glow layer plus a standard drop shadow layer.

Neumorphic UI

A developer builds a neumorphic dashboard by using the Neumorphic Light preset and adjusting colours to match the background.

Button Design

A UI designer uses the Pressed preset to create an inset shadow for a button active state that gives tactile feedback.

Frequently Asked Questions

Related Free Tools

Explore these tools that work great alongside CSS Box Shadow Generator:

CSS Border Radius Generator

Generate CSS border-radius with simple or elliptical per-corner control and shape presets.

CSS Gradient Generator

Build linear, radial, and conic gradients with presets and copy-ready CSS output.