box-shadow:
    0px 4px 6px -1px rgba(0, 0, 0, 0.1);

Free Online CSS Box Shadow Generator — Visual Shadow Builder

Design beautiful CSS box shadows visually with a live preview. This free box shadow generator supports multiple layers, presets, inset shadows, and generates ready-to-use CSS code instantly.

What Is a Box Shadow Generator?

A box shadow generator is a visual tool that helps web designers and developers create CSS box-shadow values without manually writing pixel values. Instead of guessing numbers and refreshing your browser, you adjust sliders and see the result in real time.

The CSS box-shadow property adds shadow effects around an element's frame. It's one of the most commonly used CSS properties for creating depth, elevation, and visual hierarchy in modern web interfaces.

How to Use This Box Shadow Generator

1. Choose a preset — Start with a subtle, medium, or strong shadow, or begin from scratch.
2. Adjust the sliders — Control offset X, offset Y, blur, spread, color, and opacity.
3. Toggle inset — Switch between an outer shadow and an inner shadow.
4. Add layers — Stack multiple shadows for complex effects.
5. Customize the preview — Change the background and box colors to match your design.
6. Copy the CSS — Click the copy button and paste the code into your stylesheet.

Key Features

Feature	Benefit
Live preview	See changes instantly as you adjust sliders
6 presets	Quick start with common shadow styles
Multiple layers	Stack shadows for complex, realistic effects
Inset support	Create inner shadows for sunken elements
Color picker	Full control over shadow color
Opacity control	Fine-tune shadow transparency
Copy to clipboard	One-click CSS export

Understanding CSS Box Shadow

The Syntax

The box-shadow CSS property follows this syntax:

box-shadow: [inset] offsetX offsetY blur spread color;

Value	Description	Example
inset	(Optional) Makes the shadow inner	inset
offsetX	Horizontal offset — positive = right, negative = left	4px
offsetY	Vertical offset — positive = down, negative = up	4px
blur	Blur radius — higher = softer shadow	12px
spread	Size expansion — positive = larger, negative = smaller	0px
color	Shadow color with alpha transparency	rgba(0,0,0,0.1)

Multiple Shadows

You can stack multiple shadows by separating them with commas:

box-shadow:
    0 4px 6px rgba(0, 0, 0, 0.1),
    0 10px 20px rgba(0, 0, 0, 0.05);

This creates a two-layer shadow: a tight, dark shadow close to the element, and a softer, lighter shadow that extends further — producing a more realistic depth effect.

Shadow Style Comparison

Style	CSS	Use Case
Subtle	0 1px 3px rgba(0,0,0,0.08)	Cards, list items
Medium	0 4px 6px rgba(0,0,0,0.1)	Buttons, modals
Strong	0 10px 15px rgba(0,0,0,0.15)	Dialogs, popovers
Glow	0 0 20px rgba(59,130,246,0.4)	Focus states, CTAs
Inner	inset 0 2px 4px rgba(0,0,0,0.1)	Inputs, wells
Hard	4px 4px 0 rgba(0,0,0,0.25)	Retro/brutalist UI

Real-World Use Cases

Material Design Elevation

Material Design uses shadows to indicate elevation levels. A level-1 card uses 0 1px 3px rgba(0,0,0,0.12), while a level-4 dialog uses 0 12px 17px rgba(0,0,0,0.14).

Hover Effects

Deepen a shadow on hover to create a "lifting" effect:

.card { box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.card:hover { box-shadow: 0 8px 16px rgba(0,0,0,0.15); }

Focus States

Use a colored glow for accessible focus indicators:

input:focus { box-shadow: 0 0 0 3px rgba(59,130,246,0.5); }

Neumorphism

Combine inset and outer shadows with the same color as the background for a soft, extruded look.

Tips for Better Shadows

Tip	Explanation
Keep blur subtle	Excessive blur looks unnatural. Start with 4–12px for most UI elements.
Use low opacity	Shadows in real life are not fully opaque. 5–15% opacity looks most natural.
Match your background	On dark backgrounds, use lighter shadow colors or colored glows instead of black.
Layer for realism	A two-layer shadow (tight + soft) looks more realistic than a single shadow.
Negative spread	A small negative spread (-1 to -2px) prevents the shadow from extending past the element's corners.
Avoid hard shadows on text	Use text-shadow with blur for text, never hard offsets.

Frequently Asked Questions

What is the difference between box-shadow and drop-shadow?

box-shadow follows the element's rectangular box, while filter: drop-shadow() follows the actual shape of the content (including transparent areas). Use drop-shadow for PNG images or complex shapes.

Can I animate box-shadow?

Technically yes, but animating box-shadow is not performant because it triggers repaints. For smooth animations, use two stacked elements and animate the opacity of the shadow layer instead, or use filter: drop-shadow().

Does box-shadow work on all browsers?

Yes. box-shadow has over 98% browser support globally, including all modern browsers. The only exceptions are very old versions of IE (IE8 and below).

How do I create a shadow only on one side?

Use a negative spread combined with an offset. For a bottom-only shadow: offsetX: 0, offsetY: 4px, blur: 6px, spread: -3px. The negative spread pulls the shadow in from the sides.

Can I use multiple shadows?

Yes. Use the "Add Layer" button to stack multiple shadows. This is useful for creating realistic depth with a tight shadow near the element and a softer shadow further away.

Does this tool work on mobile?

Yes. The generator is fully responsive and works on any device. All calculations happen in your browser.