Free UI Shadow Elevation Generator | Box Shadow Scale & Tailwind Config

Most codebases handle shadows the same way they handle border radii: one engineer copies a box-shadow value from Stack Overflow, another finds something that "looks right" in the inspector, and a third picks something from a design tool. Six months later, the product has eleven different shadow values across forty components, none of them related, none of them consistent. This tool generates a mathematically coherent shadow system in two minutes so you ship depth, not chaos.

What Is Elevation in UI Design?

Elevation is the visual metaphor that places UI components at different heights above the surface they sit on. A card at elevation 2 sits slightly above the page surface. A dropdown at elevation 4 sits noticeably above both the card and the page. A modal at elevation 8 sits highest of all far above everything else. This vertical hierarchy communicates interaction priority: the higher the elevation, the more the element demands attention.

Shadows are the primary visual cue for elevation. As an element rises, its shadow grows larger (more blur), spreads wider, and grows slightly more transparent because real light sources cast softer, more diffuse shadows on objects that are farther away. The most realistic shadow systems use two shadow layers per elevation level: a key shadow (directional, tight, higher opacity) and an ambient shadow (undirected, soft, lower opacity), mirroring the behavior of real-world lighting with a dominant light source and diffuse ambient light.

Why Consistent Shadows Matter More Than You Think

Inconsistent shadows are invisible to most users they can't articulate what feels wrong. But they feel it. When a tooltip has a tighter, darker shadow than the modal it sits inside, the depth hierarchy inverts: the tooltip appears to sit lower than the modal, which contradicts its stacking order. Users resolve this cognitive dissonance by trusting the interface less, even without knowing why.

For engineers and designers, inconsistent shadows create maintenance debt. When shadows aren't tokenized, every new component becomes a judgment call. Shadow values spread across dozens of files, and any rebrand or theme change requires a full audit and manual update of every instance. A token-based shadow system reduces that to a single file change.

How the Shadow Scale Generator Works

The generator uses parametric curves to grow each shadow property as elevation increases, rather than requiring you to specify every level manually. Here's what each parameter controls:

• →Blur base and growth: The base blur applies at level 1. The growth rate controls how fast blur expands per level using a quadratic curve this matches how real shadows soften exponentially as objects rise, not linearly.
• →Spread base and growth: Negative spread (inset) creates a tighter, more precise shadow. Positive spread creates a diffuse glow effect. Growth controls how spread changes per level useful for creating shadows that expand more dramatically at higher elevations.
• →Opacity base and growth: Counterintuitively, shadows on higher-elevation elements should be slightly more transparent, not darker because diffuse light from multiple angles fills the shadow area. The growth rate lets you model this correctly by keeping opacity modest at high levels.
• →Offset X and Y with growth: Directional shadows (positive Y offset) simulate overhead lighting. Zero offset creates centered glows. The growth rate increases offset at higher levels, amplifying the sense of physical distance from the surface.
• →Layered shadows toggle: When enabled, the generator adds a second ambient shadow layer at 40% of the primary shadow's values. This mimics Material Design's dual-layer system and creates significantly more realistic depth at levels 3 and above.

Implementation Guide: Using Your Shadow Scale

.card { box-shadow: var(--shadow-2); }
.dropdown { box-shadow: var(--shadow-4); }
.modal { box-shadow: var(--shadow-7); }

/* Or use the generated utility classes directly */
<div class="shadow-elevation-3">...</div>

{/* Semantic elevation via named Tailwind classes */}
<div className="shadow-elevation-2">Card</div>
<div className="shadow-elevation-4">Dropdown</div>
<div className="shadow-elevation-7">Modal backdrop</div>

[data-theme="dark"] {
  /* Reduce opacity — shadows need less contrast on dark surfaces */
  --shadow-1: 0px 1px 3px 0px #ffffff14;
  --shadow-4: 0px 4px 16px 0px #ffffff20;
  /* Or use color-mix() in modern CSS */
}

One critical implementation detail: shadows interact with background colors. A pure black shadow (#000000) at 15% opacity is nearly invisible on a dark background. On white, it's a strong shadow. On colored surfaces, it creates a muddy tint. Always preview your shadow scale on the actual background color your components will use which is exactly why this tool includes a dark/light background toggle.

Shadow Elevation Best Practices from Production Systems

Frequently Asked Questions

A consistent shadow system takes less than five minutes to build with the right tool, and it pays dividends every time a new component is designed or a theme needs updating. Generate your elevation scale above, paste the output into your project, and eliminate shadow inconsistency permanently.