What is Box Shadow Generator?
Box Shadow Generator lets you design CSS box-shadow values by dragging sliders for offset, blur, spread, opacity, and color — then copies the ready-to-use CSS. No more trial-and-error in DevTools.
Box shadow is the primary tool for creating depth in flat UI design. A well-tuned shadow makes cards “float” and buttons feel pressable.
The Five Shadow Parameters
Offset X / Y
Horizontal and vertical distance of the shadow from the element. Positive X = right, positive Y = down.
Blur Radius
How much the shadow edges are softened. 0 = hard edge, large values = very diffuse cloud shadow.
Spread Radius
Expands (+) or shrinks (-) the shadow before blurring. Negative spread can create a tight underline shadow.
Color & Opacity
Shadow color — typically a dark hue at 15–30% opacity for natural shadows, or a brand color for glow effects.
Inset
Flips the shadow to the inside. Used for inner glow, pressed buttons, or depth on text inputs.
How to Use Box Shadow Generator
Adjust the sliders
Move the offset-x, offset-y, blur, and spread sliders to shape the shadow.
Set color & opacity
Pick a shadow color and adjust opacity. Dark semi-transparent colors look most natural.
Toggle inset
Enable 'Inset' to flip the shadow to the inside of the element.
Add more layers
Stack multiple shadows for richer depth effects (e.g. a close tight shadow + distant diffuse shadow).
Copy the CSS
Click 'Copy CSS' to get the box-shadow property ready to paste into your stylesheet.
Common Shadow Recipes
| Effect | CSS Value |
|---|---|
| Subtle card lift | 0 2px 8px rgba(0,0,0,0.12) |
| Floating card | 0 8px 24px rgba(0,0,0,0.15) |
| Hard drop shadow | 4px 4px 0 #000 |
| Inner glow | inset 0 0 12px rgba(99,102,241,0.3) |
| Pressed button | inset 0 2px 4px rgba(0,0,0,0.2) |
| Blue glow | 0 0 16px rgba(59,130,246,0.5) |
Tips & Common Mistakes
Keep shadows subtle. Real-world shadows rarely go above 20% opacity. Heavy black shadows look dated. Try dark versions of your brand color at 15–25% opacity instead.
Layer two shadows for realism. A close, tight, dark shadow (low blur, low opacity) stacked with a far, diffuse, lighter shadow produces depth that mimics how objects actually cast light.
Avoid purely black shadows on colored backgrounds. A black shadow on a blue card looks muddy. Use a darker shade of the card color as the shadow color instead.
Related Tools
- Border Radius Generator — round the corners of your shadowed elements
- CSS Gradient Generator — add a gradient background behind the shadow
- Color Picker — sample a color for a colored shadow