CSS box-shadow generator
The declaration, not a canvas you drag.
- shadows
- 1
Output
box-shadow: 0px 4px 12px rgba(0,0,0,.15);
Your files stay on your device
This tool runs entirely in your browser. What you paste is processed on your device and is never sent to a server, so it is safe to use with tokens, keys and unpublished text.
How it works
- Use the sliders for a single shadow, or type one per line for several.
- A line is “x y blur spread colour” — leave any of the numbers off and it is zero.
- Switch to text-shadow if it is text you are shadowing.
- Copy the declaration.
Frequently asked questions
- Why would I want more than one shadow?
- Because one shadow almost never looks right. A real one is a tight dark edge plus a wide soft spread, and stacking two or three with different blurs and opacities is what makes a card look like it is off the page rather than outlined. Type them one per line and they come out as one declaration.
- What does spread do?
- It grows or shrinks the shadow before it is blurred. A negative spread pulls it in, which is how you get a shadow that sits under an element without leaking out at the sides.
- Why is my text-shadow spread ignored?
- Because text-shadow has no spread — it takes x, y, blur and colour only. The page tells you when you have typed a fourth number rather than dropping it silently, which is what a browser does.
- What is inset?
- It draws the shadow inside the box instead of outside, which is how you make something look pressed in. It applies to box-shadow only.
- Is anything sent to a server?
- No. It runs in your browser, so what you type stays on your computer.