CSS Box Shadow Generator
What box-shadow does
The box-shadow property draws one or more shadows around an element's border box. CSSGen.dev's box shadow generator lets you stack up to three layers, switch any of them to inset, and tune offset, blur, spread, colour and opacity while watching the result on a real card, button or input.
Syntax
box-shadow: <offset-x> <offset-y> <blur> <spread> <color>;| Part | What it controls |
|---|---|
| offset-x | How far right the shadow moves. Negative values move it left. |
| offset-y | How far down the shadow moves. Negative values move it up. |
| blur | How soft the edge is. 0 is a hard edge; larger values spread the falloff. Never negative. |
| spread | Grows (positive) or shrinks (negative) the shadow before it blurs. Often the fastest way to tighten a soft shadow. |
| color | Any CSS colour. Low-alpha values look far more natural than solid black. |
| inset | Optional keyword. Draws the shadow inside the border box instead of outside, for pressed or recessed surfaces. |
Notes from practice
Layer shadows instead of enlarging one
A single large blur reads as a grey smudge. Real depth comes from two or three layers: a tight, low-opacity shadow for contact, and a wider, softer one for ambient light. Every layer after the first is optional in this generator.
Tint the shadow, don't use black
Pure black at low opacity turns surfaces grey. Take the background's hue and darken it — a navy-tinted shadow on a blue-grey page looks like light, not dirt.
Shadows don't affect layout
box-shadow paints outside the border box without changing size or position, so it never shifts neighbouring elements. Use it rather than a border when you don't want the element to grow.
CSS Box Shadow Generator FAQ
How do I make a soft, natural box shadow in CSS?
Use two or three layered shadows rather than one big blur, keep the colour low-alpha and tinted toward your background rather than pure black, and give the largest layer a negative spread so it stays tight to the element. A good starting point is box-shadow: 0 1px 2px rgb(11 27 74 / 0.08), 0 12px 32px -12px rgb(11 27 74 / 0.18).
What is the difference between blur and spread in box-shadow?
Blur controls how soft the shadow's edge is, fading it outward from the shape. Spread changes the size of the shadow before any blur is applied — positive values make it larger than the element, negative values make it smaller. Negative spread with a large blur is the usual recipe for a tight, realistic shadow.
How do I create an inset shadow in CSS?
Add the inset keyword to the shadow: box-shadow: inset 0 2px 4px rgb(0 0 0 / 0.2). The shadow is then drawn inside the border box, which is how pressed buttons, input wells and recessed panels are built.
Can an element have more than one box-shadow?
Yes. Separate each shadow with a comma, and they paint front to back in the order written — the first shadow sits on top. This generator stacks up to three layers and writes them as a single comma-separated declaration.
How do I make a glow effect with box-shadow?
Set both offsets to 0, use a large blur and a saturated colour at partial alpha: box-shadow: 0 0 24px rgb(58 91 255 / 0.55). Adding a second, tighter layer in the same hue makes the glow read as light rather than a coloured blur.
Related generators
- Border Radius — Round each corner on its own, or switch to elliptical radii for organic blob shapes.
- Neumorphism — Soft extruded or pressed surfaces from two opposing shadows tinted off the base colour.
- Glassmorphism — Frosted glass with backdrop-filter. Blur and saturation act on whatever sits behind the card.
- Filter — Combine blur, colour adjustments and drop-shadow on any element. Defaults are left out of the output.
Part of CSSGen.dev — 30 free visual CSS generators with browser support built in.