Why does my shadow look gray instead of colored?

Shadows are rendered at the alpha value you pick, but the default black at 20% alpha over a white background is mid-gray. Either raise the alpha or shift the hue toward your brand color to keep the tint visible.

Are many shadows bad for performance?

Shadows are a paint-stage effect, not a composite-stage one. A few stacked shadows are fine, but animating box-shadow triggers repaints each frame — animate opacity on a shadow-bearing pseudo-element instead if you need smooth motion.

What does the spread value actually do?

Spread inflates or deflates the shadow shape before the blur is applied. Positive values make the shadow larger than the element, negative values shrink it — useful for creating a tight outline glow.

Box Shadow Generator

Layer multiple box shadows with full control over offset, blur, spread, color, and inset. Preview live and copy the CSS.

Shadow Layers

Layer 1

Inset

X Offset

Y Offset

Blur

Spread

Color

H220

L46

Preview

CSS

box-shadow: 4px 4px 12px 0px #6b7280;

Border Radius PreviewerFine-tune all four corners independently or use the 8-value elliptical syntax. See the shape update live.
Gradient GeneratorBuild linear, radial, and conic CSS gradients with multiple color stops, angle control, and real-time preview.
Color Palette GeneratorGenerate complementary, analogous, triadic, and more color harmonies from any base color. Export as CSS variables, Tailwind config, SCSS, or JSON.

Box Shadow Generator

Related tools