CSS Box Shadow Generator
Build CSS box shadows and copy the code.
box-shadow: 0px 10px 20px -5px rgba(0, 0, 0, 0.2);
How to use the CSS Box Shadow Generator
- 1 Adjust horizontal/vertical offset, blur and spread.
- 2 Pick a shadow color and opacity, and toggle inset if needed.
- 3 Copy the generated box-shadow CSS.
Examples
- ▸ A soft card shadow for depth.
- ▸ An inset shadow to make an input look recessed.
Frequently asked questions
What do offset, blur and spread do?
Offset moves the shadow horizontally and vertically, blur softens its edge, and spread grows or shrinks the shadow’s size before the blur is applied.
What is an inset shadow?
An inset shadow is drawn inside the element instead of outside, which makes the box look pressed in or recessed — useful for inputs and wells.
How do I make a subtle, modern shadow?
Use a small vertical offset, a generous blur, a slightly negative spread, and a low opacity (around 0.1–0.2). This creates the soft, diffuse shadow common in modern UI.
Related tools
Generators
CSS Border Radius Generator
Round corners and copy the border-radius CSS.
Generators
CSS Gradient Generator
Design CSS gradients and copy the code.
Generators
Color Palette Generator
Build harmonious color schemes from one base color.
Generators
WCAG Color Contrast Checker
Test text vs. background contrast for accessibility.
Generators
Glassmorphism CSS Generator
Design a frosted-glass UI card and copy the CSS.