CSS box-shadow generator
Design soft, realistic shadows for cards, buttons and images. Set the offset, blur, spread, colour and opacity, add an inset shadow or stack several layers for depth, and see the result on a live preview. Copy the CSS when it looks right.
How to use the CSS Box Shadow Generator
- 1Start from a preset (soft, hard, layered or inset) or the default shadow.
- 2Adjust the horizontal and vertical offset, blur, spread, colour and opacity.
- 3Add more layers for depth, or switch a layer to inset for a pressed look.
- 4Check the preview on a light or dark background, then copy the CSS.
Frequently asked questions
What do the four box-shadow numbers mean?
In order: horizontal offset, vertical offset, blur radius and spread. Positive offsets move the shadow right and down; spread grows or shrinks it before blurring.
How do I make a soft, modern shadow in CSS?
Stack two or three layers with low opacity (5–15%), a small vertical offset and growing blur, such as 0 1px 2px, 0 4px 8px and 0 12px 24px. It looks closer to real light than one dark shadow.
What does an inset box shadow do?
It draws the shadow inside the element instead of outside, so it looks pressed in. It's often used for input fields and toggles.
Do box shadows slow down a website?
Normally not. Very large blurs on many elements, or animating box-shadow, can cost some scrolling smoothness, so animate opacity or transform instead.
Related free tools
All tools- CSS Gradient GeneratorLinear, radial and conic CSS gradients with a live preview.
- Colour Contrast CheckerWCAG 2.2 AA and AAA contrast checks with a passing colour suggestion.
- HTML, CSS & JS MinifierMinify HTML, CSS and JavaScript safely.
- Responsive Screen PreviewSee a page at phone, tablet and desktop sizes.
Then schedule it with Join Postly
Plan, publish and track your posts on every network from one calendar. Free plan, no credit card.