CODDY Tool

Box Shadow Generator

Design layered CSS box shadows with a live preview and copy the code.

Build a box shadow by eye — offset, blur, spread, colour and inset — and stack several layers for depth that looks real. The CSS updates as you drag and is ready to paste.

Everything you enter stays in this browser tab. Nothing is sent to our servers, logged or stored.

This is one of the thingsCSS Generatordoes — open it for everything else it supports.

Loading tool…

What CSS Generator supports

  • GradientLinear, radial and conic.
  • Box shadowLayered, with inset.
  • Text shadowGlow and emboss effects.
  • Border radiusPer-corner control.

About Box Shadow Generator

The box-shadow property takes up to five values: horizontal offset, vertical offset, blur radius, spread radius and colour, plus an optional inset keyword that draws the shadow inside the element rather than outside it.

Spread is the one people skip, and it is the most useful. A positive spread grows the shadow before blurring, which is how you make a soft halo; a negative spread shrinks it, which is how you get a tight shadow that hugs the element and reads as a thin object rather than a floating slab.

Real depth comes from stacking. Separate several shadows with commas and the browser paints them in order — a small, darker layer for the contact shadow and a large, faint layer for the ambient one. That combination is what makes an element look like it is sitting above the page instead of having a grey rectangle behind it.

How to generate a box shadow

  1. Adjust the first layer

    Set the offset, blur and spread with the sliders. The preview updates as you drag.

  2. Add a second layer

    Stack a wider, fainter shadow behind the first. Two layers is what makes depth look real rather than pasted on.

  3. Copy the CSS

    The complete box-shadow declaration, including every layer, appears below the preview.

Frequently asked questions

What does the spread value actually do?

It grows or shrinks the shadow shape before the blur is applied. Positive values expand it in every direction; negative values contract it, which is the trick behind tight, subtle shadows that stay close to the element's edge.

How do I make a shadow look natural?

Stack two or three, keep the blur larger than the offset, push them all downward, and use a dark tint of your background hue rather than pure black. A single hard black shadow is the most common reason an interface looks dated.

Does box-shadow affect layout?

No. It is painted outside the border box and takes up no space, so it never pushes neighbouring elements around. It can be clipped by an ancestor with overflow hidden, which is the usual reason a shadow appears cut off.

How many shadow layers is too many?

Three is plenty and four is the practical ceiling. Each layer is a separate paint operation, so long lists cost real performance on large or animated elements — and past three the visual difference stops being noticeable.

Related tools

All Color & Design Tools

CSS Generator

Color & Design Tools

Build CSS gradients, box shadows, text shadows and border radii visually.

CSS Gradient Generator

Color & Design Tools

Create linear, radial and conic CSS gradients with a live preview.

Color Palette Generator

Color & Design Tools

Build harmonious colour palettes from one base colour, ready to copy as CSS.

Color Converter

Color & Design Tools

Convert a colour between HEX, RGB, HSL, HSV, CMYK and OKLCH.

Contrast Checker

Color & Design Tools

Check any colour pairing against the WCAG AA and AAA contrast requirements.

Box Shadow Generator is free to use with no account, no watermark and no usage limits. Last updated 14 August 2026.