CSS Shadow Generator
Design a box-shadow with a live preview: offsets, blur, spread, colour and opacity, with copy-ready CSS.
1 min read
Runs in your browser — your text and files never leave your device.
0px
12px
32px
-8px
28%
Draws the shadow inside the element.
Box shadows are hard to picture from numbers alone. Move the sliders and watch the card lift off the page, then copy the declaration.
How to use it
- Move the horizontal and vertical offsets to place the shadow.
- Adjust blur, spread, colour and opacity until it looks right.
- Copy the CSS rule into your stylesheet.
Good to know
- The colour and opacity are combined into a single rgba() value, which is what you paste — no separate opacity property needed.
- An inset shadow draws inside the element, which suits pressed buttons and input wells.
Related tools: Border Radius Generator · Gradient Generator
Frequently asked questions
What is the difference between blur and spread?
Blur softens the shadow’s edge; spread grows or shrinks the shadow itself before it is blurred.
Why does my shadow look wrong on a dark background?
A dark shadow on a dark surface is nearly invisible. Use a lighter shadow colour, or a subtle border, on dark backgrounds.