A box shadow is the cheapest depth effect in interface design: four numbers and a color that tell the eye how far an element floats above the page. The same property, pushed in different directions, produces three entire visual styles, the layered elevation of material design, the soft embossing of neumorphism, and the frosted glass of glassmorphism. This guide covers the syntax once and the styles in depth, with our free box shadow generator as the live preview for every recipe in it.
In this guide
The syntax: four numbers and a color
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2) reads in order: horizontal offset, vertical offset, blur radius, spread, color. Offsets move the shadow, positive meaning right and down; blur softens its edge; spread grows or shrinks it before blurring; and the color is where beginners lose realism, because real shadows are not opaque black but translucent, which is why rgba with low alpha is in every good recipe. Two modifiers complete the grammar: inset flips the shadow inside the element, and commas stack multiple shadows on one element, listed front to back. Drag each slider in the generator once and the five roles become intuitive in about a minute, which is faster than any paragraph can manage.
Elevation: shadows that mean height
Elevation systems use shadows as a vocabulary: the larger and softer the shadow, the higher the element floats, so a card sits low, a dropdown higher, a modal highest. Two observations from physical light make the effect convincing. First, light comes from above, so vertical offset should exceed horizontal, which is why 0 4px 8px looks natural and 8px 0 4px looks like a rendering error. Second, real objects cast two shadows at once, a tight dark one from the direct light source and a wide faint one from ambient light, which is exactly what the comma syntax is for:
box-shadow: 0 1px 3px rgba(0,0,0,0.24), 0 8px 24px rgba(0,0,0,0.12);
The tight shadow anchors the element, the wide one lifts it, and the pair beats any single shadow at every elevation. To build a consistent scale, keep the ratios and grow the numbers: doubling offsets and blur reads as roughly one level higher, and three or four levels are all an interface needs.
Neumorphism: the two-shadow emboss
Neumorphism makes elements look pressed from the same material as the page, soft plastic rather than floating paper. The recipe is rigid, which makes it easy: the element’s background must equal the page background, corners go well rounded, and two shadows pull in opposite directions, a dark one toward bottom-right and a light one toward top-left, as if one soft light hung above the page’s top-left corner:
box-shadow: 6px 6px 12px rgba(163,177,198,0.6), -6px -6px 12px rgba(255,255,255,0.8);
Swap both shadows to inset and the bump becomes a dent, which is the style’s native pressed-button state. The honest caveats: the effect only exists on mid-tone backgrounds, since the light shadow needs room to be lighter and the dark one darker, and the low contrast that gives the style its softness is a real accessibility cost for interactive elements, which is why neumorphism works best as an accent and worst as an entire interface.
Glassmorphism: blur behind, light border in front
Glassmorphism is the one style here that box-shadow cannot deliver alone, because frosted glass is defined by what shows through it. The recipe has four parts: a semi-transparent background, backdrop-filter: blur() to frost whatever sits behind the element, a one-pixel light border standing in for the bright edge of real glass, and a soft conventional shadow for lift. The glassmorphism generator tunes all four together over a sample background, which matters because the style lives or dies by its backdrop: over a colorful gradient it looks like glass, over flat white it looks like a slightly gray box. That dependency is the design rule in one line, glass panels belong on rich backgrounds, built in the gradient generator if the page does not already have one.
Text shadows: the three-value cousin
Text gets its own property with one value fewer: text-shadow: 1px 1px 2px rgba(0,0,0,0.5) is offset, offset, blur, color, with no spread and no inset. Its two honest jobs are legibility, a soft dark shadow rescuing light text over a busy photo, and lettering effects, where stacked comma-separated text shadows produce outlines, glows and long-shadow styles. The text shadow generator previews both. The restraint rule is stronger for text than for boxes: body text takes no shadow ever, and a display heading takes one only when the background forces it or the design genuinely calls for lettering as decoration. Shadows of both kinds sit inside a larger family of visual tools, mapped in the CSS generators pillar.
Frequently asked questions
Why does my shadow look like a gray box around the element?
Too much spread, too little blur, or full-opacity color, usually all three. Realistic shadows keep spread at or near zero, blur generous, and alpha low; the lazy fix is dialing any reference recipe from this guide into the generator and adjusting from there rather than from black-at-100%.
Do box shadows hurt performance?
Static shadows are cheap on any modern browser. The cost appears when shadows animate, since every frame repaints the blur; animate opacity or transform on a pre-shadowed element instead of animating the shadow itself, and large blurs on dozens of elements deserve a scroll-performance sanity check.
What is the difference between box-shadow and drop-shadow?
The filter: drop-shadow() function follows the rendered silhouette of an element, including transparency in PNGs and clip-path shapes, while box-shadow follows the rectangular box. For an irregular shape, drop-shadow is the one that looks right; for cards and panels, box-shadow is cheaper and offers spread and inset, which drop-shadow lacks.
Can a shadow go upward?
Negative vertical offset casts it above the element, which reads as light coming from below: rare in nature, so it looks deliberate or wrong depending on context. The legitimate use is bottom-anchored elements like sticky footers and bottom sheets, where an upward shadow correctly separates them from content scrolling beneath.