A restrained card lift
Soft lift uses a downward offset, a broad blur, and negative spread so the shadow remains compact near the card.
Shadow layers
Surface preview
◈Shadow preview
The card shows the current shadow layers.
The first shadow paints on top of later shadows. Blur must be nonnegative; negative spread shrinks the shadow. Preview canvas color is not included in the export.
Inputs and previews are processed locally in your browser. No external color or design API is used.
How to use the Box Shadow Generator
- 01
Start with a preset or adjust the first shadow layer.
- 02
Set horizontal and vertical offsets, blur radius, spread, and opacity.
- 03
Add another layer or enable inset for a shadow inside the card.
- 04
Check the result on the intended surface color, then copy or download CSS.
Examples
A graphic offset stack
Crisp stack combines two unblurred shadows. The earlier shadow paints above the later one, producing distinct stacked edges.
Offset, blur, and spread do different jobs
Offsets move the shadow. Blur softens its edge and must be nonnegative. Positive spread expands the shadow silhouette; negative spread contracts it. A large blur on a very transparent color can be barely visible, especially on a similar canvas.
Layer order and inset shadows
Comma-separated shadows paint with the first listed shadow above the others. Each layer can be inset or outer. Shadows follow the element border radius, while the preview uses a rounded card. This export includes the card background but leaves border radius and layout to your component.
Common questions
Does opacity replace the color alpha?
No. The layer opacity multiplier is multiplied by any alpha already present in its color input.
Why is part of a large shadow missing in the preview?
The preview stage clips effects at its edge. In a page, overflow rules on ancestors can also clip shadows. Give the element enough surrounding space.
Does box-shadow change layout size?
An outer shadow is a painting effect. It does not reserve additional space in normal layout; account for overlap with neighboring content yourself.