Box Shadow CSS Generator

Build box shadows visually and copy the CSS. Adjust offset, blur, spread, and color — drag the shadow handle or use arrow keys to position it.

Settings

Box
Stage
Box

Drag the orange handle to move the shadow. Click the stage and use ← ↑ → ↓ (hold Shift for 10px steps).

What this tool does

Box Shadow CSS Generator builds box-shadow CSS with a live preview. Drag the shadow handle to set offset, adjust blur, spread, color, opacity, and inset — then copy the CSS.

Runs entirely in your browser. Customize stage and box backgrounds to preview shadows on light, dark, or checkerboard surfaces.

Why use Box Shadow CSS Generator

  • See shadow changes instantly instead of guessing values in DevTools.
  • Drag handle and arrow keys for precise X/Y offset.
  • Copy ready-to-paste CSS for cards, buttons, and modals.
  • Test inset shadows for pressed buttons or wells.
  • Free — no extension or Figma plugin required.

How it works

Adjust sliders or drag the orange handle on the preview stage. Toggle stage/box fill between checkerboard and solid colors, then copy the generated CSS.

  1. Set offset X/Y with sliders or drag the handle.
  2. Adjust blur and spread for soft or sharp shadows.
  3. Pick shadow color and opacity.
  4. Toggle inset for inner shadows if needed.
  5. Copy the CSS into your stylesheet or component.

Step-by-step instructions

Card elevation for a dashboard UI

  1. Set a small Y offset (e.g. 4px) and moderate blur (16px).
  2. Use a dark shadow at 15–25% opacity.
  3. Preview on a light gray stage.
  4. Copy CSS to your .card class.

Example

Scenario: A frontend dev prototypes button hover states.

  1. Creates a default shadow for the resting state.
  2. Increases blur and spread for hover elevation.
  3. Copies both CSS blocks into a React component.

FAQs

Can I get multiple shadows?
This tool generates one shadow at a time — combine multiple rules in your CSS for layered effects.
Does it include background-color?
Yes — the output includes the box background you set in the preview.
Inset vs outer shadow?
Check the inset box for inner shadows (e.g. form inputs).
Works on mobile?
Yes — sliders and preview work on touch devices; drag may vary by browser.

Related tools