CSS Shadow Generator

Why Single-Layer Shadows Look Fake

In the real world, an object doesn't cast a single type of shadow. A sharp, narrow shadow forms where the object touches a surface, while a softer, more diffuse shadow appears farther away. This is because light sources have area, they aren't single points.

Using just one `box-shadow` value can only express one of these characteristics. That's why no matter how much you adjust the blur, the result often looks stamped on. The solution is to stack multiple shadow layers with different properties.

Opacity Should Be Much Lower Than You Think

The most common reason beginner-made shadows look awkward is their intensity. Using 30-50% black doesn't look like a shadow; it looks like a black smudge. On a white background, a natural shadow is usually around 8-15% black. That's why this tool's default is 12%.

Another tip: if you use pure black (`#000000`) for the shadow color, the resulting gray tones can make the screen look muddy. Using a dark color from the background's family (e.g., a navy-tinged `#0f172a`) looks much more sophisticated. This is why UI design systems rarely use pure black for shadows.

• Card shadows: 8-14% opacity, large blur, and a spread of 0 or a negative value.
• A negative spread makes the shadow smaller than the element, creating a subtle effect just beneath it. This looks much more refined.
• Always use a positive `y` value. Light comes from above. A shadow with a negative `y` feels wrong.
• `x` should generally be 0. A horizontally shifted shadow is only used in special cases to simulate side lighting.

Fixing Disappearing Shadows in Dark Mode

A black shadow on a black background is invisible. It sounds obvious, but if you take a shadow painstakingly crafted for light mode and use it as-is in dark mode, your cards will blend into the background, completely losing all sense of depth. Even cranking the opacity up to 40% won't help—a darker black on top of black is still just black.

For dark mode, you need to change your entire approach to creating depth. Here are three methods that real-world dark UIs use.

• Brighten the surface: The more an element "floats," the lighter its background becomes compared to the page background. This is the official method for Material's dark theme. It uses brightness, not shadow, to express elevation.
• Use a border ring: Like the "Border Ring" preset, setting only `spread` to 1-2px and keeping x, y, and blur at 0 creates a thin outline that defines the element's edge. Use a light color with low opacity.
• Add a top highlight: An `inset` shadow with a light color at the top of an element can simulate a lit top edge.

/* Light Mode — depth via shadow */
.card {
  background: #fff;
  box-shadow: 0 1px 2px rgba(15,23,42,.06),
              0 4px 8px -2px rgba(15,23,42,.08),
              0 12px 24px -6px rgba(15,23,42,.10);
}

/* Dark Mode — depth via brightness + thin ring */
@media (prefers-color-scheme: dark) {
  .card {
    background: #1e293b;              /* Lighter than background (#0f172a) */
    box-shadow: 0 0 0 1px rgba(255,255,255,.06),
                0 12px 24px -6px rgba(0,0,0,.5);
  }
}

Performance: Shadows Aren't Free

A `box-shadow` with a large `blur` is an expensive effect that the browser has to recalculate on every repaint. You might not notice it normally, but it becomes a problem in two situations.

• A list with dozens of shadowed cards: This will cause choppy scrolling, especially on low-end devices.
• A `transition` on `box-shadow` for a hover effect: The shadow value is recalculated on every frame of the animation. It's much smoother to pre-render the shadow and transition its opacity, as shown below.

/* Slow — recalculates shadow every frame */
.card { transition: box-shadow .2s; }
.card:hover { box-shadow: 0 20px 40px -12px rgba(30,41,59,.22); }

/* Fast — pre-render shadow and transition opacity */
.card { position: relative; }
.card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: 0 20px 40px -12px rgba(30,41,59,.22);
  opacity: 0; transition: opacity .2s;
  pointer-events: none;
}
.card:hover::after { opacity: 1; }

text-shadow Has Different Rules

When you switch the mode to `text-shadow`, the `spread` and `inset` controls disappear. That's because the `text-shadow` property doesn't support them. It only accepts four values: x-offset, y-offset, blur, and color.

The most practical use for text shadow isn't for styling, but for ensuring text is readable on top of an image. Adding a very subtle black shadow (around 30-40% opacity, 4px blur) to white text makes it legible whether the background is light or dark.

• The "Text Outline" preset works by placing four `blur: 0` shadows in four directions. It's a robust solution for complex backgrounds but can make the text look thicker. `-webkit-text-stroke` is an alternative.
• The "Text 3D" preset builds thickness by stacking multiple shadows offset by 1px each. The trick is to make each successive layer progressively darker.
• Avoid using shadows on body text. On small fonts, a shadow can blur the letterforms and actually make the text harder to read. As a rule, only use it on large headings.