Soft Shadow Generator
Create subtle, diffused shadows for elegant UIs
Shadow Preview
Test the shadow on a more realistic card surface before you export it to production.
0px 10px 30px -12px rgba(0, 0, 0, 0.14), 0px 3px 8px -4px rgba(0, 0, 0, 0.08)Export
Copy the current multi-layer stack as CSS, Tailwind, SCSS, React, HTML, or CSS variables.
box-shadow: 0px 10px 30px -12px rgba(0, 0, 0, 0.14), 0px 3px 8px -4px rgba(0, 0, 0, 0.08);Other Shadow Styles
What are Soft Shadows?
Soft shadows use high blur values with low opacity, creating gentle, diffused effects that suggest subtle elevation. Unlike harsh drop shadows, soft shadows feel natural and contemporary—the hallmark of modern, minimalist design systems.
The key is restraint: large blur radius, small offset, low opacity. Elements appear to float just above the surface without aggressive contrast that draws unwanted attention.
Why Use Soft Shadows?
Soft shadows define modern UI design. Apple, Google, and most premium interfaces use diffused shadows that add depth without distraction. They make surfaces feel touchable yet refined.
In light mode designs, soft shadows prevent flat interfaces without the harshness of high-contrast shadows. They add hierarchy while maintaining visual calm—essential for content-focused applications.
How It Works
The formula prioritizes blur over offset:
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
Small vertical offset (4px) suggests top lighting. Large blur (20px) creates diffusion. Low opacity (0.08) keeps it subtle.
For cards and panels, even softer works: 0 2px 40px rgba(0,0,0,0.05). The shadow barely registers consciously but adds crucial depth perception.
Common Use Cases
- Cards in minimal design systems
- Subtle button elevation
- Modal backgrounds
- Floating navigation bars
CSS Example
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);Pro Tip
Test soft shadows on different background colors—they may need opacity adjustments to stay visible on darker surfaces.