CSS Box-Shadow Generator
Design CSS box-shadows with sliders for offset, blur, spread, color and opacity. Live preview and one-click copy.
Pure browser JavaScript — generates CSS locally.
How to use this tool
- Adjust the X/Y offset, blur and spread sliders.
- Pick a shadow color and opacity, toggle inset if needed.
- Copy the box-shadow CSS.
Design CSS box-shadows with sliders for offset, blur, spread, color and opacity. Live preview and one-click copy.
How it works
The CSS Box-Shadow Generator provides sliders for every aspect of a shadow — horizontal offset, vertical offset, blur radius, spread radius, color, and opacity — with a live preview on a sample element so you can see the exact result before copying the CSS.
Horizontal and vertical offsets move the shadow left/right and up/down relative to the element. Blur radius controls how soft or sharp the shadow edge is — a blur of 0 produces a hard shadow while large values create a diffuse glow. Spread radius makes the shadow larger or smaller than the element itself; negative spread creates a shadow smaller than the element.
The inset keyword, available as a toggle, renders the shadow inside the element's border rather than outside, useful for pressed-button effects and inner depth.
You can stack multiple shadows by adding additional shadow layers. Each shadow is rendered in order, and together they can create sophisticated effects like material design elevation, neumorphism, or neon glows.
Worked example
Design a card elevation shadow
- Set horizontal offset to 0, vertical offset to 4px.
- Set blur radius to 12px and spread to -2px.
- Choose a dark color (e.g. #000) at 15% opacity.
- Preview on the sample card element.
- Copy the CSS and add it to your .card selector.
A soft, realistic drop shadow that lifts the card above the page background.
Common mistakes to avoid
- Using a black shadow with 100% opacity on light backgrounds, which looks unnaturally harsh — lower the opacity to 10-20% for a realistic shadow.
- Setting blur radius to 0 when trying to create a glow effect; glow effects need a large blur and a colored shadow with no offset.
- Applying heavy shadows to many elements on a page, which can degrade rendering performance on low-end devices.
Key terms
- Blur radius
- The distance over which the shadow edge transitions from opaque to transparent; 0 is a hard edge, larger values are softer.
- Spread radius
- Expands (positive) or contracts (negative) the shadow before blurring, making the shadow larger or smaller than the element.
- Inset shadow
- A box-shadow variant that renders inside the element, creating an indented or pressed appearance.
Frequently asked questions
- What does spread do?
- Positive spread grows the shadow in every direction before the blur is applied; negative spread shrinks it.