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.
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.
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.
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.