Box Shadow Generator

A tool to layer multiple shadows (e.g., creating smooth, realistic depth) which is tedious to write by hand.

CSS Code

Features

  • Multi-Layer Shadows: Add unlimited shadow layers to create complex depth effects.
  • Full Control: Adjust offset (X/Y), blur, spread, color, and opacity for each layer.
  • Inset Shadows: Toggle 'Inset' for inner shadows.
  • Hex to RGBA: Automatically handles color hex and alpha transparency.

How to Use

  1. Use the controls to adjust the primary shadow layer.
  2. Click "Add Layer" to stack another shadow on top.
  3. Tweak the horizontal and vertical offsets to position the shadow.
  4. Adjust blur and spread to soften or expand the shadow.
  5. Copy the final CSS property.