CSS box-shadow generator
Adjust offset, blur, spread, colour and opacity, see the shadow on a sample card, and copy the CSS box-shadow rule.
Runs in your browser. Nothing you enter is uploaded.
What it does
The CSS box-shadow property draws a shadow around an element. This tool lets you move the sliders, watch the shadow change on a sample card, and copy the finished rule.
How to use it
- Set the horizontal and vertical offsets to move the shadow.
- Raise the blur for a softer edge, and the spread to make the shadow larger or smaller than the box.
- Pick a colour and lower the opacity until the shadow looks natural.
- Copy the CSS.
Worked example
A soft card shadow: box-shadow: 0px 10px 28px 0px rgba(0, 0, 0, 0.18);
How it works
The values are, in order: horizontal offset, vertical offset, blur radius, spread radius and colour. A positive vertical offset moves the shadow down, as if light comes from above. Blur softens the edge; spread grows or shrinks the shadow before blurring. The keyword inset draws the shadow inside the box.
Questions
What makes a shadow look realistic?
A small vertical offset, a blur larger than the offset, and low opacity. Pure black at full strength looks heavy.
Can I use more than one shadow?
Yes. Separate several shadows with commas in one box-shadow rule.
Do shadows slow a page down?
Large blurred shadows on many elements, or animated ones, cost drawing time. A few static shadows are fine.
Related tools
Need an app or website for your shop? See how to hire us →