Open menu

CSS Box Shadow Generator

Design box shadows layer by layer. Drag each shadow's offset on a pad, set blur, spread, color and opacity, switch layers to inset, or generate a smooth multi-layer shadow in one click. Paste an existing shadow to edit it, start from 32 presets (elevations, soft, bold, glow, inset and focus rings) and copy the result as CSS, a CSS variable, SCSS or Tailwind.

Preset gallery

Accessibility checks

  • Check The element and background differ by only 1.1:1. If it's a control (button, input), add a border with 3:1 contrast. Shadows alone don't count (WCAG 1.4.11).
  • Pass 4 layer(s), total blur 60px: cheap to render.

Export code

.shadow {
  background-color: #FFFFFF;
  border-radius: 16px;
  box-shadow: 0px 2px 4px 0px rgba(15, 23, 42, 0.1), 0px 4px 8px 0px rgba(15, 23, 42, 0.1), 0px 8px 16px 0px rgba(15, 23, 42, 0.1), 0px 16px 32px 0px rgba(15, 23, 42, 0.1);
}
Import CSS (copy from a site)

Paste CSS from your site or browser dev tools: a rule or just declarations. Supported properties are loaded into the controls; everything else is listed. You can undo the import.

Favourites on this device (0)

No favourites yet.

Layers

Smooth shadows stack several layers with doubling offsets. They read as one soft, realistic shadow.

Offset (drag)
Shadow color
Element

How to use the box shadow generator

  1. Start from a preset or one of the Smooth S–XL buttons.
  2. Select a layer and drag its offset on the pad, or focus the handle and use the arrow keys. Fine-tune with the offset, blur and spread sliders.
  3. Add, duplicate or reorder layers. The first layer is drawn on top.
  4. Turn on Inset for inner shadows, such as pressed buttons or input wells.
  5. Set the element and background colors so the preview matches your page, then check the edge contrast.
  6. Copy plain CSS, a --shadow custom property, SCSS or Tailwind (an arbitrary value plus a config/theme snippet for a named shadow).

Already have a shadow? Paste it into Paste an existing shadow, for example 0 4px 12px rgba(0, 0, 0, 0.2), 0 1px 2px #0000001a, and every layer becomes editable.

How it works

box-shadow takes a comma-separated list. Each item is inset? x y blur spread color:

box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12), 0 8px 24px rgba(15, 23, 42, 0.12);

The first shadow in the list paints on top. Shadows never affect layout, so adding one doesn’t move neighbouring elements. They follow border-radius, and inset shadows draw inside the padding box.

Examples

  • Subtle card: 0 1px 2px rgb(0 0 0 / 0.06), 0 1px 3px rgb(0 0 0 / 0.1) gives a crisp edge plus a soft spread, good for resting cards.
  • Raised on hover: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1). The negative spread keeps the shadow under the element instead of around it.
  • Focus ring: 0 0 0 3px in your accent color draws an outline that follows the border radius and doesn’t change layout.
  • Inset field: inset 0 1px 2px rgb(0 0 0 / 0.08) makes an input look slightly recessed.
  • Colored glow: 0 8px 24px with your brand color at about 35% opacity lifts a primary button off the page.

Choosing shadows for a design system

Use a small elevation scale (for example 1–5) and assign each level a job: cards rest at 1–2, dropdowns float at 3, dialogs sit at 5. The Elevation presets give you a consistent ladder. Colored shadows, matching a tinted element, look more natural than grey on colorful designs.

Common mistakes

  • Very dark, tight shadows. Use low opacity (0.08–0.2) and more blur.
  • Shadows on dark backgrounds. Black shadows disappear on dark surfaces. Use a lighter surface, a subtle border, or a colored glow instead.
  • Animating box-shadow directly. Animate the opacity of a pseudo-element that carries the shadow; it’s much cheaper.

Import CSS from your site

Already have a style you like? Open Import CSS (copy from a site), paste a rule or just its declarations from your stylesheet or your browser’s developer tools, and press Import into the controls. This tool reads box-shadow (every layer, including inset), background color and border-radius. Everything else, and rules for states such as :hover or media queries, is listed as skipped, and the import can be undone in one step.

Frequently asked questions

What do the four box-shadow numbers mean?

In order: horizontal offset, vertical offset, blur radius and spread. Positive offsets move the shadow right and down. Blur softens the edge, and spread grows or shrinks the shadow before blurring. A negative spread is useful for shadows that only peek out underneath.

Why use several shadow layers instead of one?

Real shadows have a sharp, dark core close to the object and a wide, faint falloff further away. Stacking two to six layers with increasing offset and blur imitates that, which is why layered shadows look softer and more natural than a single large one.

What is a smooth shadow?

The smooth buttons build an eased stack: each layer doubles the previous layer's offset and blur, and they share the opacity. The result reads as one soft shadow with a realistic falloff.

Do box shadows hurt performance?

Static shadows are cheap. Large blurs and many layers cost more when they have to repaint often, for example during animations or on long scrolling lists. The check flags heavy shadows so you can keep them for a few key elements.

Is a shadow enough to show where a button or input is?

Not on its own. WCAG 1.4.11 asks for 3:1 contrast for the visual boundary of interactive components. If the element and the background are nearly the same color, add a border as well; the edge-contrast check tells you when.

Sources