Skip to main content
CompressNConvert

CSS Box Shadow Generator

Create CSS box shadows with multiple layers, blur, spread, color, and inset controls. Try card and glow presets, preview the effect, and copy the CSS.

Runs locally in your browser

Light direction

Drag the marker to set the offset.

Shadow color

Saturation 64 percent, brightness 16 percent, hue 222 degrees.

Presets

Preview

Preview surface

Element color

Backdrop color

Shadow layers

The first layer paints on top of the rest.

Generated code

box-shadow: 0px 8px 24px -4px rgba(15, 23, 42, 0.18);

Complete tool guide

CSS Box Shadow Generator guide

Generate CSS box-shadow declarations for cards, panels, and inset surfaces. Build multiple layers, adjust their offsets, blur, spread, and opacity, and use the preview to compare a subtle contact shadow with a broader ambient shadow.

Your input is processed in the current browser tab and is not sent to the application server.

Why use this tool?

  • Combine several shadows in one copyable declaration.
  • Tune each layer without manually editing a long CSS value.
  • Start from card, glow, hard-offset, or inset presets.

Common use cases

  • Card, popover, and dialog elevation in a design system
  • Focus rings and active states built from a coloured glow
  • Inset shadows for pressed buttons and recessed wells
  • Flat offset shadows for editorial and brutalist layouts

How to use it

  1. 1

    Pick a preset, or start from the single default layer.

  2. 2

    Drag inside the offset pad to set the light direction.

  3. 3

    Tune blur, spread, color, and opacity for the selected layer.

  4. 4

    Add more layers for a natural falloff, then copy the CSS.

Controls and results explained

X and Y offsets

Positive X moves a shadow right; positive Y moves it down. The drag control changes these offsets for the selected layer.

Blur and spread

Blur softens the edge. Positive spread expands the shadow shape and negative spread contracts it. Blur cannot be negative.

Layer order and inset

CSS paints the first listed shadow above later shadows. Inset draws a shadow inside the box instead of outside it.

Worked examples

Create a subtle card shadow

Start with: The Subtle preset

  1. Select Subtle in the preset panel.
  2. Inspect the single layer and copy CSS.
box-shadow: 0px 1px 2px 0px rgba(15, 23, 42, 0.08);

This low-opacity shadow provides a small edge cue. It may need adjustment against a darker page background.

Create an inset surface

Start with: The Inset preset

  1. Select Inset.
  2. Compare the inner edge in the preview and copy CSS.
box-shadow: inset 0px 2px 6px 0px rgba(15, 23, 42, 0.25);

The inset keyword changes where the shadow is painted; it does not change the element’s size.

Card elevation

A tight, faint layer can mark contact with the surface while a wider layer suggests lift. Compare the result on the actual page background before choosing opacity.

Shadow or drop-shadow?

box-shadow follows the element’s box and rounded corners. For the opaque silhouette of a transparent image, CSS filter: drop-shadow() serves a different purpose and is not this tool’s output.

Layout and clipping

Outer shadows do not reserve layout space. A parent with overflow clipping can hide them, so check spacing and scroll containers in the final component.

Practical tips for better results

  • Start with the Card preset and reduce opacity if the surface becomes visually heavy.
  • Use a consistent light direction across neighboring components.
  • Check keyboard focus separately; a decorative glow is not automatically a sufficient focus indicator.

Frequently asked questions

How do I add multiple box shadows?

Add layers in the editor. The output joins them with commas in a single box-shadow declaration, with the first layer painted on top.

Why is my shadow cut off?

Check ancestor overflow settings and available space. Shadows can extend outside the box without increasing its layout dimensions.

Can I animate the shadow?

CSS can interpolate compatible shadow lists, but large animated blurs may be expensive to paint. Test performance on your target devices.

What to check before using the result

  • The preview background and dimensions affect the perceived shadow. Recheck it in the actual component.
  • A shadow alone does not establish an accessible boundary or focus treatment.

Keep working

Related color & design

Continue with another focused tool from the same collection.

CSS Gradient GeneratorBuild linear, radial, and conic gradients with draggable multi-stop control.CSS Text Shadow GeneratorLayer text shadows for glow, outline, letterpress, and long-shadow effects.CSS Border Radius GeneratorDrag handles to shape corners, from rounded boxes to organic blob shapes.Glassmorphism GeneratorDesign frosted-glass panels with blur, tint, border, and shadow controls.