CSS Box-Shadow Builder
Understand CSS Box-Shadow Builder
Builds CSS box-shadow declarations from offset, blur, spread, color, and inset controls, with support for stacking multiple layers.
How it works
The syntax is `box-shadow: [inset] offset-x offset-y blur spread color`. The offsets move a copy of the element's box; spread grows or shrinks that copy before it is blurred; blur then softens the edge over roughly the blur distance, centered on the edge so about half falls inside the shape and half outside. Multiple shadows are comma-separated and painted front to back, so the first in the list sits on top — which is why realistic depth comes from stacking a small tight shadow over a large diffuse one rather than from a single large blur.
When to use it
- Building an elevation scale for a design system, where each level is a consistent pair of stacked shadows
- Creating an inset shadow for a pressed button, a well, or an input field
- Drawing a hairline border with a zero-blur spread shadow, which does not affect layout the way a real border does
- Matching a shadow from a design file without decoding its offset and blur values by hand
Watch out for
- box-shadow follows the border box and its border-radius, not the artwork inside it. For a transparent PNG or an SVG icon you want `filter: drop-shadow()`, which follows the alpha silhouette.
- Inset shadows are drawn inside the padding box and are clipped by the border. An inset shadow on an element with no padding may be almost entirely hidden behind its own content.
- Large blur radii are expensive to paint and are recomputed on every repaint. A dozen 60px shadows in a scrolling list is a measurable frame-rate cost on low-end devices.
- A shadow on a clipped element disappears. Both clip-path and `overflow: hidden` on an ancestor cut the shadow away, because a shadow is painted outside the element's box.
Frequently Asked Questions
How to apply box shadow in CSS?
Add box-shadow: offset-x offset-y blur-radius color to any element. Example: box-shadow: 0 4px 12px rgba(0,0,0,0.15) creates a soft drop shadow. Use the builder to adjust sliders and copy the exact CSS property — no manual syntax memorization needed.
How to make a box shadow in CSS?
The syntax is: box-shadow: horizontal-offset vertical-offset blur-radius spread-radius color. A positive vertical offset casts a shadow below the element; negative goes above. Blur-radius controls softness (0 = hard edge). Add the "inset" keyword before the offsets for an inner shadow.
Can I layer multiple box shadows?
Yes — comma-separate multiple box-shadow values: box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 8px 24px rgba(0,0,0,0.08). Shadows render front-to-back (first is on top). Layering a crisp small shadow with a large diffuse one creates realistic material depth.
How to Use CSS Box-Shadow Builder
- Paste or type your input in the input area above.
- The tool processes your input automatically or click Run.
- Copy or download the result using the action buttons.
- Use Ctrl+Enter to run quickly from the keyboard.