CSS box-shadow generator
The declaration, not a canvas you drag.
Examples temporarily replace the input and settings. You can restore your previous work.
0 characters
- 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.
Example
Worked example — CSS box-shadow generator
Use the input lines in order and the settings below. Compare your result with the output rows.
| Item | Value |
|---|---|
| Input 1 | 0 4 12 #000000 |
| Property | box-shadow |
| Inset | Off |
| Output 1 | box-shadow: 0px 4px 12px #000000; |
The shadow has no horizontal offset, a 4px downward offset and 12px blur. Its color is opaque black.
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, and a browser that meets a fourth length throws away the whole declaration, so no shadow shows at all. The page leaves that number out of the CSS and adds a note saying so.
- 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.