The CSS box-shadow property adds a shadow around an element. Its values are, in order: horizontal offset, vertical offset, blur radius, spread radius, and color — with an optional inset keyword. To make one, drag sliders in a visual generator and copy the result. Here is what each value does.
Horizontal (X) and vertical (Y) move the shadow; positive Y drops it below.
Blur softens the edge; spread grows or shrinks the shadow size.
A low-opacity color looks natural; toggle inset for an inner shadow.
Paste the box-shadow value into your stylesheet.
What do the box-shadow values mean?
box-shadow: x y blur spread color; — for example 6px 8px 24px 0 rgba(124,58,237,.25). The first two are the offset, the third softens it, the fourth changes its size, and the colour (usually a low-opacity rgba) sets the tint. Add inset to draw it inside. Build it visually with the box-shadow generator.
How to get a soft, modern shadow
Use a small vertical offset, a generous blur, a spread near zero and a low opacity (around 15–25%). Tinting the shadow with the element’s own color — converted via the color converter — looks more cohesive than plain black.
Tip: Layer two shadows (a tight, darker one plus a wide, soft one) for realistic depth — separate them with a comma in the box-shadow value.
Make a box shadow now
Design a CSS box-shadow with sliders and a live preview, then copy the code — free, in your browser.
Open the Box Shadow Generator →Frequently Asked Questions
What are the box-shadow values?
Horizontal offset, vertical offset, blur radius, spread radius and color, with an optional inset keyword.
What does inset do?
It draws the shadow inside the element instead of outside, for pressed or inner-glow effects.
Is anything uploaded?
No — the shadow is generated in your browser.