Skip to main content

CSS Box Shadow Generator

Design multi-layered box shadows visually and copy the ready-made CSS.

How to Use

  1. 1Choose a preset or select a shadow layer.
  2. 2Adjust X/Y offsets, blur, spread, color, opacity, and inset while checking the live preview.
  3. 3Add, duplicate, remove, or reorder layers, then copy the declaration or CSS variable.

About this tool

X moves a shadow horizontally and Y vertically. Blur softens the edge while spread grows or shrinks its footprint. Inset draws inside the element; multiple comma-separated layers combine depth, highlights, and colored accents. For example: box-shadow: 0 10px 30px -8px rgba(15, 23, 42, .25);. Avoid excessive blur, low-contrast muddy shadows, and too many competing layers.

Frequently Asked Questions