CSS Box Shadow Generator – Visual Preview & Copy

Design the perfect box shadow visually, then copy the CSS

Tweak sliders, pick a color, and watch your shadow update in real time. When it looks right, hit copy — and paste one line of CSS straight into your project. No trial-and-error guessing in your stylesheet.

Box shadow syntax at a glance

Every box-shadow value follows this pattern:

box-shadow: x-offset y-offset blur-radius spread-radius color;

• x-offset — how far the shadow shifts left (negative) or right (positive), in pixels.
• y-offset — how far it shifts up (negative) or down (positive), in pixels.
• blur-radius — how soft or sharp the edges are. 0 = hard edge; higher = more blur.
• spread-radius — how much the shadow grows beyond the element size. Negative values shrink it.
• color — any valid CSS color, including rgba() for transparency.

Bonus keyword: inset — add it at the start of the value to flip the shadow inside the element (great for pressed-button effects):

box-shadow: inset 0 2px 6px rgba(0,0,0,0.2);

How to use the box shadow generator

1. Adjust the X and Y offset sliders to set the shadow's direction.
2. Drag the blur slider to control how soft the edges look.
3. Set the spread if you want the shadow to be larger or smaller than the element.
4. Pick a color — rgba with some transparency (e.g. rgba(0,0,0,0.3)) usually looks most natural.
5. Toggle Inset if you need an inner shadow.
6. Copy the generated CSS and paste it into your stylesheet or component.

Worked example: a soft card shadow

Say you want a subtle floating-card effect — common in dashboards and landing pages. Here are the settings:

The generator outputs:

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

Drop that onto a .card class and you get a clean elevation effect that works in every modern browser — no image, no extra markup.

How to add a box shadow in code (without the generator)

Sometimes you just need to tweak a value directly in your editor. Here's how that looks:

Plain CSS

/* Soft drop shadow */
.card {
  box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.12);
}

Tailwind CSS (v3+)

Tailwind has built-in shadow utilities, but for a custom value you can use arbitrary properties:

<div class='[box-shadow:0px_8px_24px_0px_rgba(0,0,0,0.12)]'>
  Card content
</div>

CSS-in-JS (React / styled-components)

const Card = styled.div`
  box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.12);
`;

How the box shadow generator works

Everything runs entirely in your browser. As you move a slider or pick a color, the tool builds the box-shadow string from your inputs and applies it to the preview element via JavaScript — no page reload, no server call.

Your design choices never leave your device. Nothing is uploaded or stored.

Under the hood, the property follows the MDN CSS box-shadow reference and is standardized in the W3C CSS Backgrounds and Borders spec.

When to use a CSS box shadow — and when not to

Great for:

• Card elevation and layering in UI design systems
• Focus rings and accessibility highlights
• Inset shadows for text inputs or pressed states
• Multiple layered shadows (stack comma-separated values for richer depth)

Not the right tool when:

• You need a shadow that follows an irregular shape — use filter: drop-shadow() instead, which respects transparency.
• You're targeting very old browsers (IE 8 and below don't support it). Almost any modern browser you'd target today handles box-shadow without a prefix.
• Performance is critical on mobile canvas animations — a box-shadow can trigger repaints; consider switching to a filter or a pre-rendered image for heavy animation loops.

Once you have your shadow dialed in, copy the output and paste it directly into your CSS file or design token. The live preview means what you see is exactly what you get — no surprises in the browser.