CSS · 1 min read · May 12, 2026
The most beautiful CSS box-shadows in 2026
Why shadows matter
A shadow carries information: it signals an element’s elevation above the page. The higher an element sits, the wider and softer its shadow. Mastering this logic instantly adds depth and hierarchy to your UI.
The golden rule: soft shadows
Hard, black shadows are a thing of the past. In 2026, prefer diffuse shadows (large blur) that are very transparent (opacity between 0.06 and 0.16), with a dark color rather than pure black:
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
The premium secret: layered shadows
A single shadow often looks artificial. The designer trick is to stack two or three shadows: a crisp close one and a diffuse distant one. The result mimics real light.
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 12px 32px rgba(15, 23, 42, 0.12);
Our favorite recipes
1. Floating card
box-shadow: 0 10px 30px rgba(2, 6, 23, 0.10);
2. Colored button
box-shadow: 0 8px 20px rgba(37, 99, 235, 0.35);
3. “Pressed” effect (inset)
box-shadow: inset 0 2px 6px rgba(15, 23, 42, 0.18);
Adapting shadows for dark mode
In dark themes, black shadows become invisible. Increase the opacity (0.4 to 0.6) or replace the shadow with a subtle light border to keep depth.
Generate your own
Rather than guessing, use our box-shadow generator: tune every parameter, watch the result live and export to CSS, SCSS or Sass.