dark_mode

Box Shadow Generator

Craft professional layered shadows with visual controls and live CSS export.

codeGENERATED CSS

.shadow-custom {
  box-shadow: 0px 10px 25px -5px #00000066;
  border-radius: 24px;
  background-color: #14141a;
  width: 250px;
  height: 250px;
}

Style Inspiration

Deep Float

3-layer heavy elevation

Golden Glow

Accent lighting effect

Neumorphic

Soft claymorphism

Inner Glow

Soft interior active state

Box Shadow FAQ

Shadows That Create Depth, Not Dirt

The anatomy of a believable shadow

Four numbers and a color — each does one job:

Parameter	Effect	Realistic range
X / Y offset	Light direction — Y positive = light from above	0 / 2–8 px
Blur	Soft vs hard edge	8–24 px for UI
Spread	Shadow size beyond the element	Usually 0 or negative
Color + alpha	The big one — never pure black	rgba(0,0,0,0.08–0.18)

Why your shadow looks muddy

Pure black at high opacity is the giveaway of a beginner shadow — real shadows are colored by ambient light. Drop opacity below 0.2, and for polish use two layered shadows: a tight one (small offset, small blur) for contact and a large soft one for ambient depth. Elevation should be systematic: the higher an element “floats” (dropdown < modal < toast), the bigger offset and blur it gets.

Shadows in the design system

Like radii, shadows belong in a small reusable scale (sm / md / lg), not invented per element. They pair with border radius to sell the card metaphor, and dark mode needs its own treatment — shadows barely read on dark backgrounds, where borders and lighter surfaces do the lifting. Check text stays readable over shadowed surfaces with the contrast checker, and generate the surface tints in the gradient generator.