CSS box-shadow generator
Craft box-shadow values visually. Set horizontal and vertical offset in pixels, blur radius (soft edge), spread (grow or shrink the shadow before blur), color, opacity, and optional inset for inner shadows. The preview box updates live; copy the full box-shadow declaration into your CSS. Understand how each parameter changes elevation and depth without trial-and-error in devtools.
X (px)
Y (px)
Blur (px)
Spread (px)
Color
Opacity (0–1)
CSS
box-shadow: 0px 8px 24px 0px rgba(20, 20, 20, 0.18);
How to build a box shadow
1. Set X and Y offset — positive X moves shadow right, positive Y moves it down.
2. Adjust blur (softness) and spread (size before blur).
3. Pick shadow color and opacity.
4. Toggle inset if the shadow should appear inside the box; copy CSS.
Shadow recipes
Soft card elevation
offsetY 8px, blur 24px, spread 0, black at 18% opacity — a Material-style floating card: box-shadow: 0 8px 24px rgba(20,20,20,0.18).
Sharp drop shadow
blur 0, spread 0, offsetY 4px — hard edge like a sticker lifted slightly off the page.
Inset pressed button
Enable inset with small blur — simulates a pressed or recessed control inside the element.
When to use this tool
• When you tune UI depth for cards, modals, and buttons.
• When you learn how blur differs from spread.
• When you document design tokens with exact shadow values.
When to choose something else
• When you need multiple stacked shadows — copy the first layer here, then append more in CSS.
• When you want text-shadow — different property with similar syntax.
• When you need drop-shadow on irregular PNG shapes — filter: drop-shadow() may work better.
Reading the four numbers
box-shadow: 0 8px 24px 0 means x=0, y=8px down, blur=24px, spread=0. Omit spread and browsers default spread to 0. Large blur with zero offset creates a glow; large offset with small blur creates directional light.
Layering shadows
Comma-separate multiple shadows: box-shadow: 0 1px 2px rgba(0,0,0,0.1), 0 4px 12px rgba(0,0,0,0.15); First shadow paints below later ones. Combine a tight dark shadow with a wide light one for realistic depth.
Accessibility and performance
Heavy shadows on large animated areas can cost GPU paint time. Prefer subtle shadows for data-dense UIs. Ensure focused elements remain visible — do not rely on shadow alone to show state; pair with border or outline for keyboard users.
Frequently asked questions
What is the box-shadow syntax?
box-shadow: offset-x offset-y blur-radius spread-radius color; Optional inset keyword makes an inner shadow.
Blur vs. spread?
Blur softens the shadow edge. Spread expands or contracts the shadow shape before blurring — positive spread enlarges, negative shrinks.
What units should I use?
This tool outputs pixels (px), the most common choice for screen UI shadows.
What does inset do?
Inset draws the shadow inside the element border box — useful for sunken inputs or wells.
Can shadow color be semi-transparent?
Yes. Opacity is applied to the chosen color, producing rgba output for smooth edges over varied backgrounds.
Are values sent to a server?
No. Preview and CSS are local.
Is this free?
Yes, no account needed.