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;

3 · See also

02·CSS

Border Radius Previewer

Fine-tune all four corners independently or use the 8-value elliptical syntax. See the shape update live.

02·CSS

Gradient Generator

Build linear, radial, and conic CSS gradients with multiple color stops, angle control, and real-time preview.

01·COL

Color Palette Generator

Generate complementary, analogous, triadic, and more color harmonies from any base color. Export as CSS variables, Tailwind config, SCSS, or JSON.

Runs entirely in your browser.

Every color, gradient and CSS output is generated on this page. Nothing is uploaded, logged or shared.

Box Shadow Generator

Related Tools