How To Use Box Shadows Effectively
📖 Bu rehber ToolPazar ekibi tarafından hazırlanmıştır. Tüm araçlarımız ücretsiz ve reklamsızdır.
The six values, decoded
Box shadow is the depth system of the web. Done right, it makes cards feel layered, buttons feel clickable, modals feel like they’re floating. Done wrong, it makes your page look like a 2010 iOS skeuomorphism tribute. This guide covers the six box-shadow values and what they actually do, the elevation system used by Material Design and modern design systems, inset shadows, multi-layer shadows that feel real, dark mode differences, performance, and the common mistakes that make shadows look bolted on.
The elevation model
Material Design popularized a tiered shadow system where each level represents how “lifted” an element is. Modern design systems (Tailwind, Radix Themes, Chakra) follow the same pattern.
Multi-layer shadows — the secret to realism
Use a consistent set across your project. Inconsistent shadows are the tell of a hand-built design.
Color — black isn’t always right
Real-world shadows have multiple components: the hard “contact” shadow right under the object and the soft ambient shadow further away. A single CSS shadow approximates one of these; stacking two makes the object feel grounded.
Inset shadows
The first layer is tight and sharper (contact); the second is diffuse (ambient). Multi-layer shadows are what make Stripe and Linear UIs look polished.
Filter drop-shadow — for complex shapes
Pure black (#000) shadows look dirty against colored backgrounds. Instead:
Hover and transition
Classic use: input fields in older UIs, pressed-button states, card thumbnails with subtle inner border.
Performance considerations
Slightly more expensive to render than box-shadow (GPU filter pass vs layout-only). Use for icons and irregular shapes, box-shadow for rectangles.
Dark mode — the full redesign
A classic move: slight shadow increase on hover to suggest the element is lifting.
Common mistakes
The translateY reinforces the lift; the larger shadow reads as distance from the surface.
Run the numbers
Shadows are GPU-accelerated but expensive compared to flat-color rendering.