CSS Shadow Generator

CSS Box-Shadow Syntax Explained

The CSS box-shadow property adds shadow effects to elements. Its syntax includes five values: horizontal offset, vertical offset, blur radius, spread radius, and color. The horizontal offset moves the shadow left (negative) or right (positive). The vertical offset moves it up or down. Blur radius controls how soft the shadow edges appear — higher values create softer, more diffused shadows. Spread radius expands (positive) or contracts (negative) the shadow size.

A sixth optional keyword, "inset," places the shadow inside the element rather than outside. Inset shadows create the appearance of pressed or sunken elements, commonly used for input fields and toggle buttons in their active states.

CSS Text-Shadow Syntax

Text shadows use a simpler syntax with only three values: horizontal offset, vertical offset, blur radius, and color. There is no spread radius for text shadows. Text shadows are commonly used for adding depth to headings, creating embossed or letterpress effects, and improving text legibility over background images by adding a subtle dark glow behind light text.

Multiple Shadows for Depth and Realism

CSS allows multiple shadows separated by commas. Layering several shadows with different offsets, blurs, and opacities creates realistic depth effects. A common pattern uses two shadows: a tight, darker shadow close to the element and a larger, lighter shadow further away. This mimics how real objects cast both a sharp near-shadow and a diffused far-shadow under ambient lighting.

Neumorphism Design and Shadow Techniques

Neumorphism (or soft UI) is a design trend that uses multiple shadows to create the illusion of extruded or pressed elements on a surface. It combines a light shadow (top-left, using white) with a dark shadow (bottom-right, using a darker shade of the background color). The effect works best on colored backgrounds and creates a tactile, 3D-like appearance. While visually distinctive, neumorphism can have accessibility challenges due to low contrast.

Performance Considerations

CSS shadows are rendered by the GPU on most modern browsers, making them performant for static elements. However, animating box-shadow properties can cause repaints and reduce frame rates. For animated shadows, consider using pseudo-elements with opacity transitions instead — create the shadow on a ::before or ::after element and animate its opacity for smooth transitions without triggering layout recalculations.

Shadows in Design Systems

Material Design defines five elevation levels using specific shadow values. Apple's Human Interface Guidelines use shadows to establish visual hierarchy and depth. Most design systems define 3–5 shadow tokens (sm, md, lg, xl) for consistent use across components. Tailwind CSS provides shadow utilities (shadow-sm through shadow-2xl) that implement a well-tested shadow scale suitable for most applications.