CSS Box Shadows: The Difference Between Elevation and Glow

Quick answer: box-shadow takes an offset, a blur radius, an optional spread radius, and a color. Elevation effects use a downward offset with moderate blur and a dark, low-opacity color to mimic a real light source above the element. Glow effects drop the offset entirely and push blur, spread, and color saturation outward instead, so the effect reads as light being emitted rather than a shadow being cast.

box-shadow is one property with four or five numeric values and a color, and those same few inputs can produce an effect that reads as "this card is physically lifted off the page" or one that reads as "this button is glowing" - the difference is entirely in which values get pushed which direction.

The values that actually shape a shadow

A box-shadow value is built from: horizontal offset, vertical offset, blur radius, spread radius, and a color (with an inset keyword to flip it inward). Offset moves the shadow away from the element in a direction. Blur softens its edges. Spread grows or shrinks the shadow shape itself, independent of blur. Getting a specific feeling out of a shadow is about which of these gets emphasized.

Stacking shadows with the comma-separated list

box-shadow accepts more than one shadow at once, separated by commas, and the order matters: the first shadow in the list is painted on top, closest to the viewer, with each following shadow layered beneath it. This is the actual mechanism behind most convincing elevation effects, a single shadow tends to look flat or artificial no matter how its values are tuned, while two or three stacked shadows at different offsets, blurs, and opacities can approximate how light actually layers in a real scene, a tight contact shadow close to the object plus a softer, more diffuse one further out.

Elevation: mimicking a real light source

An "elevated card" effect mimics how a real object lit from above casts a shadow below and slightly to one side: a modest vertical offset (shadow falls downward), a moderate blur (real shadows aren't hard-edged), little or no spread, and a fairly dark, low-opacity color. Multiple stacked shadows - a tighter, darker one close to the card and a softer, lighter one further out - tend to look more convincing than a single shadow, because that's closer to how ambient and direct light actually layer in reality.

Layering shadows for a convincing lift

A practical two-layer elevation shadow typically pairs a small offset and tight blur at a slightly higher opacity (the "contact" shadow, simulating light that can barely reach directly under the element) with a larger offset and wider blur at a lower opacity (the "ambient" shadow, simulating softer, scattered light reaching further out). Raising the element's implied height in the design usually means increasing both the offset and the blur together, not just one or the other, since a real object further from a surface casts a shadow that's both further away and softer-edged at the same time.

Box Shadow Generator builds this visually, sliding each value independently and copying out the resulting CSS - useful specifically because getting an elevation shadow to look convincing rather than just "dark and blurry" is more about tuning several values together than picking one impressive-sounding number.

Glow: removing the direction entirely

A glow effect inverts the approach: little or no offset (light doesn't just come from one side for a glow), a generous blur, and often a positive spread to push the effect outward, in a bright, often saturated color rather than a dark neutral one. Without a directional offset, the shadow radiates evenly around the element instead of implying a light source above it - which reads as "this thing is emitting light" rather than "this thing is blocking light from above."

Building a glow that doesn't look muddy

The most common failure mode for a glow isn't the offset or blur, it's opacity and saturation pulling in opposite directions: a low-opacity glow in a highly saturated color can look washed out and pale rather than luminous, while a high-opacity glow in the same color can look like a flat colored outline instead of light. A glow generally reads best with a moderately high opacity on a color that's already saturated and bright relative to the background behind it, so the contrast against that background is doing as much visual work as the blur itself.

Neumorphism: elevation and glow combined

Neumorphism (soft UI) takes the elevation idea and applies it symmetrically: instead of one dark shadow implying light from above, it uses two shadows at once, a light one offset toward the implied light source and a dark one offset directly opposite it, both on a background that closely matches the element's own color rather than contrasting with it. The effect reads as the element being extruded from, or pressed into, the surface it sits on, rather than simply floating above a contrasting background the way a standard elevation card does. Neumorphism Generator builds this specific two-shadow combination directly, since getting both shadows correctly opposed and color-matched by hand is fiddlier than a standard single-direction elevation shadow.

Why color choice matters as much as the numeric values

A shadow's color is doing more work than it looks like: a shadow using pure black at high opacity tends to look flat and heavy, while a shadow using a low-opacity black, or a hue pulled from the page's own palette, tends to look integrated rather than pasted on. This is often the difference between a shadow that looks like part of the design and one that looks like a default browser effect nobody adjusted. The same logic applies to shadows cast by text rather than boxes, Text Shadow Generator tunes the equivalent offset, blur, and color values for the separate text-shadow property, which follows the same light-source logic but paints around glyph outlines instead of a box's edges.

Common mistakes with box-shadow

Reaching for pure black by default. It's the browser's implicit default in a lot of quick mockups, and it's rarely what a real cast shadow actually looks like, since ambient light keeps real shadows from ever being fully opaque black.

Forgetting box-shadow doesn't affect layout. Because a shadow can visually extend well past an element's edges without changing that element's actual box size, a large blurred or spread shadow can visually overlap a neighboring element in a way that's easy to miss until it's actually rendered.

Stacking too many heavy shadows. Multiple large, heavily blurred shadows on many elements at once (a whole grid of cards, for instance) can add up to a real rendering cost, especially if any of them are being animated, so it's worth keeping stacked shadows to what the effect actually needs rather than adding a third or fourth "for good measure."

Skipping inset for a pressed-in effect. The same property that creates a floating card can create a recessed, pressed-in look by adding the inset keyword, useful for form fields or toggled states where the visual metaphor should be "pushed in" rather than "lifted up."

The short version

Elevation and glow come from the same CSS property pointed in different directions: elevation uses a directional offset and dark, low-opacity color to imply a light source above the element; glow drops the offset and pushes blur, spread, and color saturation outward instead, to imply the element is emitting light rather than blocking it. Neumorphism combines both ideas into a single two-shadow technique, and the same offset-blur-color logic carries over to text-shadow for type rather than boxes. Box Shadow Generator, Neumorphism Generator, and Text Shadow Generator all make the values easy to tune visually rather than guessing at numbers directly in a stylesheet.