How To Use Box Shadow İn Css
📖 Bu rehber ToolPazar ekibi tarafından hazırlanmıştır. Tüm araçlarımız ücretsiz ve reklamsızdır.
The five (or six) values
A box shadow is defined by up to six components:
Light comes from above
Real-world shadows come from light, and in most UI conventions, light shines from above (or slightly above-left). So shadows cast downward and slightly right. Positive Y offset, zero or slightly positive X offset:
Subtle beats bold
Break this convention only for specific effects (inverted elevation, moody product photography). For general UI, stick with it or your interface feels off.
Stacking shadows for depth
Good UI shadows are surprisingly gentle. A 1–2 px offset, 4–12 px blur, and 5–15% black opacity cover most elevation needs. Heavier shadows (20+ px blur, 30%+ opacity) look dated and heavy; they were fashionable in the early 2010s and have since gone out of style.
Spread: the secret fourth number
Real shadows have a near-contact shadow (tight, dark) and an ambient shadow (wide, soft). Combining both with a comma-separated list feels more natural than a single shadow:
Inset shadows
The first value produces the contact shadow right under the card; the second adds the ambient glow. Tools like Material Design and shadcn build whole systems around this two-shadow pattern.
Building an elevation scale
Spread adds to or subtracts from the shadow’s rendered size before the blur is applied. Positive spread is useful for thick, buttery shadows on big elements; negative spread tightens the shadow so only the edges show.
Hover transitions
The first pattern is the classic “focus ring” replacement for outline; the second lifts the shadow so it reads as more “off the page” than its vertical offset alone.
Dark mode considerations
Rather than inventing shadows per element, define a scale and reference it. Material Design uses 24 levels (overkill); most systems do fine with 4–6. A pragmatic scale:
Colored shadows
Map UI concepts to levels:
Performance
A card that lifts on hover is a classic interactive cue. Combine shadow with a tiny upward translate and a transition:
Common mistakes
The translate sells the physical lift; the shadow upgrade reinforces it. 150ms is the sweet spot — faster feels twitchy, slower feels laggy.
Run the numbers
Black shadows on black backgrounds are invisible. In dark mode, either increase opacity dramatically, use a slightly lighter-than-background shadow color, or rely on a subtle inner border instead of a shadow.