CSS Box-Shadow Generator

Create box-shadow values with multiple layers (outer or inset shadow), offset, blur, spread, and color, with a live preview over a configurable background and border radius, plus common presets. It shares the same controls and the same color converter as the gradient generator.

Processed on your device, no AIhasta 8 capas de sombra

1 active layer(s)

box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.25);

The data is processed on your device and is never sent to the server.

Use cases

How to use this tool

  1. Add one or more shadow layers
  2. Adjust each layer's offset, blur, and color
  3. Copy the CSS or download the .css file

Frequently asked questions

Can I combine several shadows?
Yes. You can add several layers, enable or disable them, and reorder them; the final CSS combines them, comma-separated, in a single box-shadow property.

Related tools

← Back to home