CSS Box Shadow Generator — Complete Guide to Every Property

The CSS box-shadow property adds depth, elevation, and visual hierarchy to any element. It takes six values, each controlling a different aspect of the shadow. Here is exactly what each one does, with real values you can use immediately.

The box-shadow Syntax

The full declaration:

box-shadow: h-offset v-offset blur spread color inset;

Only h-offset and v-offset are required. Everything else is optional. Here is what each property controls:

Property	What It Does	Default	Example Value
h-offset	Horizontal position. Positive = right, negative = left.	Required	4px, -4px, 0
v-offset	Vertical position. Positive = down, negative = up.	Required	6px, -2px, 0
blur	Edge softness. 0 = sharp edge. Higher = softer.	0	12px, 20px, 40px
spread	Expand (+) or contract (-) shadow size before blur.	0	2px, -4px, 0
color	Shadow color. Use rgba for transparency.	currentColor	rgba(0,0,0,0.3)
inset	Renders shadow inside the element instead of outside.	(none)	inset

What Each Value Actually Looks Like

h-offset and v-offset shift the shadow from the element. Think of a light source: box-shadow: 4px 6px means the light comes from the top-left, casting a shadow down and to the right. Setting both to 0 centers the shadow evenly behind the element — useful for glows and all-sides shadows.

blur is the most visually impactful property. Compare these:

• box-shadow: 4px 4px 0px black; — hard edge, looks like a shifted copy
• box-shadow: 4px 4px 8px rgba(0,0,0,0.3); — soft, natural shadow
• box-shadow: 4px 4px 30px rgba(0,0,0,0.2); — wide, diffused glow

spread is the least understood property. Positive spread makes the shadow bigger than the element. Negative spread makes it smaller — which is the key to directional shadows. box-shadow: 0 8px 12px -4px rgba(0,0,0,0.3); creates a bottom-only shadow because the negative spread pulls the shadow inward on all sides, but the v-offset pushes it below the element.

5 Popular Shadow Presets

Copy these directly into your stylesheet:

1. Subtle Lift (cards, buttons)

box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);

Clean, minimal elevation. The go-to for card components and clickable surfaces. Two layers: a tight shadow for definition and a softer one for depth.

2. Material Design Elevation

box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);

Google Material Design level 2. Stronger than subtle lift, works for floating action buttons, dialogs, and elevated surfaces.

3. Sharp / Hard Shadow (retro, brutalist)

box-shadow: 5px 5px 0px #000;

Zero blur, solid color. Creates a flat, graphic look popular in brutalist and retro design. Pair with bold borders and high-contrast colors.

4. Neon Glow (dark themes)

box-shadow: 0 0 20px rgba(88,166,255,0.5), 0 0 40px rgba(88,166,255,0.2);

No offset, just blur and a colored shadow. Creates a glowing halo. Works on dark backgrounds only — invisible on white. Swap the color to match your accent.

5. Inner Shadow (inputs, pressed buttons)

box-shadow: inset 0 2px 6px rgba(0,0,0,0.3);

The inset keyword flips the shadow inside the element. Creates a pressed or recessed look. Standard for text inputs and toggle buttons in their active state.

Our Tool vs Other Generators

Feature	WildandFree Box Shadow	cssgenerator.org	getcssscan.com/css-box-shadow	Josh Comeau Shadow Tool
Live preview	✓ Real-time	✓ Real-time	~Preset gallery only	✓ Real-time
Custom values	✓ All 6 properties	✓ Most properties	✗ Pre-made only	✓ All properties
Multiple shadows	✓ Layer multiple	~Limited	✗ Single preset	✓ Yes
Inset support	✓ Toggle on/off	✓ Checkbox	✗ No	~Limited
Copy CSS	✓ One click	✓ One click	✓ One click	✓ One click
Runs in browser	✓ No data sent	✓ Website	✓ Website	✓ Website
Ads	✓ None	✗ Display ads	✗ Paywall for full set	✓ None
Price	✓ Free	✓ Free	$29 one-time for all	✓ Free

Use preset galleries (like getcssscan) when you want quick inspiration. Use a generator (like ours or Josh Comeau's) when you need precise control over every value.

Real Workflow: Shadow to Production

1. Design the shadow — open the Box Shadow Generator, adjust offset, blur, spread, and color until it looks right
2. Copy the CSS — one click copies the box-shadow declaration
3. Paste into your stylesheet — add it to your card, button, or container class
4. Combine with border-radius — rounded corners + shadow = polished component. border-radius: 8px; with the shadow follows the curve naturally
5. Add transition for hover — transition: box-shadow 0.2s ease; on the base state, then a stronger shadow on :hover for interactive feedback
6. Test on mobile — large shadows can look heavy on small screens. Consider reducing blur and offset at mobile breakpoints

Shadow + Border-Radius + Transition

A complete card component with shadow interaction:

.card {
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.card:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,0.2), 0 4px 8px rgba(0,0,0,0.15);
  transform: translateY(-2px);
}

The hover state increases shadow depth and lifts the card slightly. The transition makes it smooth. This pattern is everywhere — from Stripe's dashboard to GitHub's repo cards.

Developer Tools That Pair Well

• Box Shadow Generator — design and copy box-shadow CSS visually
• CSS Gradient Generator — create gradient backgrounds to pair with shadows
• Color Picker — find the right rgba values for shadow colors
• Code Formatter — format your CSS after pasting generated code
• Code Minifier — minify production CSS including shadow declarations
• Code Screenshot — screenshot your shadow CSS for documentation or social sharing