二维码生成器

What the five box-shadow values actually mean

The CSS box-shadow property looks intimidating because it packs several numbers onto one line, but each value has a clear physical meaning. A single shadow is written as offset-x offset-y blur spread color, with an optional inset keyword in front. This generator gives you a slider for each number and a color picker, then assembles the exact declaration for you. Understanding what each control does is the difference between dialling in a clean, believable shadow and producing the muddy grey halo that marks an amateur stylesheet.

Blur versus spread — the pair people confuse

Blur and spread both make a shadow "bigger", but in opposite ways. Spread changes the size of the shape being cast — a spread of 10px draws the shadow as if the element were 10px larger on every side, with a still-crisp boundary. Blur then takes that boundary and feathers it outward over the given distance, fading to transparent. A shadow with high spread and zero blur looks like a solid coloured outline; high blur and zero spread looks like a soft, diffuse cloud. Real-world shadows almost always need some blur, because nothing in nature casts a perfectly sharp shadow under ambient light.

A worked example

Say you want a subtle "card lifted off the page" look. Set Offset X to 0 (light coming straight from above casts no horizontal shift), Offset Y to 4, Blur to 12, and Spread to 0. Pick black at low opacity. The tool builds:

box-shadow: 0px 4px 12px 0px rgba(0,0,0,0.25);

Notice the color is emitted as rgba(), not a hex string. This generator appends an alpha byte to your chosen color and converts it, because shadow opacity is what makes a shadow look real. A fully opaque black shadow reads as a hard graphic shape; a 15–30% black shadow reads as a believable cast of light. The small downward offset plus a soft blur is the recipe behind almost every "elevation" style in modern interfaces.

Stacking layers for realistic depth

CSS lets you list several shadows separated by commas, and they render back-to-front. The "Add Layer" button stacks them for you. This is the single biggest upgrade you can make to a flat-looking shadow. Designers mimic real optics by combining a tight, darker shadow close to the element with a wider, lighter one further out. For example:

box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.20), 0px 8px 24px 0px rgba(0,0,0,0.12);

The first layer grounds the element; the second gives it ambient lift. A single shadow can never reproduce this falloff, which is why layered shadows look so much more convincing than one big blur.

Inset shadows

Toggling inset moves the shadow inside the element's box instead of casting it outward. This is how you create pressed buttons, inset form fields, carved or embossed text panels, and "well" containers that look recessed into the page. The same offset/blur/spread values apply, but the visual effect inverts: a positive Y offset on an inset shadow darkens the top inner edge, as if light were coming from below the rim.

Common mistakes

• Pure black at full opacity. The most common beginner error. Real shadows are semi-transparent and often slightly tinted toward the background or the brand color, never solid #000.
• Too much blur, no spread. Cranking blur alone gives a vague grey fog. Add a touch of negative spread to keep the shadow tucked under the element instead of leaking out all sides.
• Equal X and Y offsets everywhere. Pick one light direction (usually top-down, so X near 0) and keep it consistent across the whole interface, or shadows will fight each other.
• Ignoring performance. Very large blur radii on many animated elements can tax the GPU. Keep blur modest on anything that moves.
• Forgetting that spread also affects inset shadows. A positive spread on an inset shadow eats into the element's interior, which can clip content unexpectedly.

Everything updates live in the preview card and the generated CSS string is always ready to copy. The tool runs entirely in your browser — no styles are uploaded anywhere.