CSS Box Shadow Generator
Build a CSS box-shadow visually — pick offset, blur, spread, and color, preview it, and copy the CSS.
- Free
- No account
- Runs in your browser
- Nothing uploaded
#000000box-shadow: 4px 4px 10px 0px #000000;
Runs entirely in your browser — your input is never uploaded, logged, or stored.Privacy policy
What is CSS Box Shadow Generator?
The CSS box-shadow property draws a shadow around (or inside) an element without an image. It is how you get the lifted, layered look on buttons and cards. A single box-shadow value packs four numbers and a color, which is why most people end up guessing at it:
• Offset X and offset Y move the shadow right/left and down/up by how many pixels. • Blur softens the shadow's edge — the larger the blur, the gentler the fall-off. A blur of 0 gives a hard, crisp edge. • Spread grows or shrinks the shadow from the element's edge: positive pushes it outward, negative pulls it inward. • Inset flips the shadow to the inside of the element, which reads as a recessed or pressed-in surface.
An optional inset keyword and the color complete the value. The browser renders all lengths in px and interpolates the alpha.
Because a shadow rarely looks right on the first try, this tool renders a live preview as you adjust each slider — the preview element uses the exact CSS produced, so what you see is what you copy.
Standard CSS box-shadow syntax, per the CSS Backgrounds and Borders Module Level 3:
box-shadow: [inset] <offset-x> <offset-y> <blur-radius> <spread-radius> <color>;
• inset — optional; present casts the shadow inside the element. • offset-x / offset-y — horizontal and vertical offsets in px. Positive x is right, positive y is down. • blur-radius — positive px value; larger = softer edge. This tool treats it as non-negative. • spread-radius — px; positive grows the shadow beyond the element edge, negative shrinks it. • color — this tool accepts 6-digit hex and emits the value with that color opaque (alpha 1).
Lengths are clamped to a sane range (offsets ±200px, blur 0-200px, spread ±200px) so a slip of the slider cannot produce an absurd or invalid value. Output is always written in px.
Browser support: box-shadow with a single shadow is supported in every evergreen browser.
Worked examples
- 4px 4px 10px 0px with #000000 → box-shadow: 4px 4px 10px 0px #000000;
- 0px 8px 16px 0px with #000000 → box-shadow: 0px 8px 16px 0px #000000;
- 0px 4px 12px 0px with #00000033 → box-shadow: 0px 4px 12px 0px #00000033;
- inset 2px 2px 8px 0px → box-shadow: inset 2px 2px 8px 0px #000000;
- 0px 0px 0px 4px → box-shadow: 0px 0px 0px 4px #000000; (a solid outline-style border)
How to use CSS Box Shadow Generator
- Adjust the X and Y offsets to move the shadow.
- Raise the blur to soften the edge, or leave it at 0 for a crisp one.
- Use spread to grow or shrink the shadow from the element.
- Pick a color and, if you want a recessed look, toggle inset.
- Copy the generated CSS and paste it into your stylesheet.
Common errors
- The shadow doesn't show — check that offset X and offset Y are not both trying to hide it; a shadow with 0 blur and 0 spread can be lost at 0 offset. Negative offsets are valid and simply mirror the shadow.
- The preview looks different from the browser — the preview uses the exact same box-shadow value, so if it renders elsewhere differently, clear your cache (hard refresh).
- The shadow is too harsh — raise the blur. A crisp edge is exactly what a 0 blur gives you.
- I typed a color name but it was rejected — this tool accepts 6-digit hex only (e.g. #000000).
FAQ
What is the difference between spread and blur?
Blur controls how soft the shadow's edge is: 0 is a hard knife-edge, larger values are a gentler fall-off. Spread controls how far the shadow extends beyond the element's edge before blur applies: positive spread pushes it outward, negative pulls it inward. A 0px 0px 0px 0px shadow with spread is how you make a simple border-like ring.
What does inset do?
The inset keyword flips the shadow so it is cast inside the element rather than outside. It makes a surface look pressed-in or recessed — like a pressed button or an inset panel. You flip it on and off in one toggle; the preview updates instantly.
Can I use the generated CSS commercially?
Yes. The CSS is generated in your browser with no license restrictions. Paste it into any personal or commercial project.
Why does the tool clamp my values?
Lengths are clamped to a sane range (offsets ±200px, blur 0-200px, spread ±200px) so a stray slider position can't produce an invalid or unwieldy value. Within those bounds the exact number you set is what's emitted.
Can I add multiple shadows?
Not in this version. It generates a single clean shadow. Multiple comma-separated shadows have the same syntax, so once you have a value you like you can paste it into a multi-shadow list yourself.
Related tools
Prefer AllUtil on Google
One click adds AllUtil to your Google preferences. You'll see our tools highlighted with a Preferred badge in Search and AI answers.