CSS Box-Shadow Generator

What is Box Shadow Generator?

The CSS box-shadow property adds shadow effects to HTML elements, accepting parameters for horizontal offset, vertical offset, blur radius, spread radius, shadow color, and inset mode. A single box-shadow declaration can create realistic drop shadows for cards, elevation depth cues in Material Design, glow effects for focus states, and inset pressed-button aesthetics.

Unlike Photoshop's drop shadow (which bakes shadows into a raster image), CSS box-shadow is rendered by the browser in real time, is fully animatable with CSS transitions, respects element opacity and z-index, and is computed from the element's exact border-box shape. This makes CSS box-shadow dramatically more flexible for interactive design than static image shadows.

Understanding Box-Shadow Parameters

The complete box-shadow syntax is: box-shadow: [inset] offset-x offset-y blur-radius spread-radius color. The offset values position the shadow relative to the element — positive x-offset moves shadow right; positive y-offset moves down. Blur radius controls shadow softness (0 = hard edge; larger values create softer diffusion). Spread radius expands (+) or contracts (-) the shadow beyond the element boundaries before blurring.

Negative spread combined with larger blur creates a natural shadow that doesn't exceed the element boundary — the CSS Tricks recommended technique for realistic card shadows. The inset keyword transforms box-shadow from an exterior drop shadow to an interior shadow, creating sunken or inset UI elements. Inner shadows are used for pressed button states, well/groove effects, and inner glow highlights.

Multi-Layer Shadows and Elevation Design Systems

CSS box-shadow accepts multiple comma-separated shadow layers: box-shadow: 0 2px 4px rgba(0,0,0,0.2), 0 6px 12px rgba(0,0,0,0.1). Combining a near small shadow with a far diffused shadow creates physically realistic lighting where objects cast both a sharp contact shadow and a diffuse ambient shadow. This technique underlies Google's Material Design elevation system.

Design systems define shadow scales for different elevation levels — lower elevation elements have small, sharp shadows (close light source); higher elevation elements have larger, softer shadows (distant light source effect). The Google Material Design specification defines 24 elevation levels (dp), each with a precisely defined box-shadow formula combining multiple layers at different opacities and blur radii.

When Developers Use Box Shadow Generator

Designing card elevation effects for product listings and UI components
Creating glow effects for focus states on form inputs and buttons
Building multi-elevation depth hierarchies for dashboard designs
Designing pressed/active button states using inset box-shadow
Creating neumorphism (soft UI) design elements with dual shadows
Adding depth to modal dialogs and popover overlays
Designing notification badge rings and highlight borders using spread
Creating text-overflow gradient indicators using inset box-shadow

Frequently Asked Questions

What are all the parameters of CSS box-shadow?

box-shadow: [inset] offset-x offset-y [blur-radius] [spread-radius] color. Offset-x (required): horizontal position; positive = right, negative = left. Offset-y (required): vertical position; positive = down, negative = up. Blur-radius (optional, default 0): softness of shadow edge; 0 is hard edge. Spread-radius (optional, default 0): expands (+) or shrinks (-) shadow size. Color (optional): shadow color including transparency.

How do I create a realistic drop shadow for a card?

A natural-looking card shadow combines a tight contact shadow with a diffuse ambient shadow: box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24). The first layer is the contact shadow (small blur, low opacity); the second is the ambient shadow (slightly larger). Using negative spread (-2px to -3px) keeps the shadow within the card boundaries for a crisper result.

What is an inset box-shadow and when should I use it?

Adding the 'inset' keyword makes the shadow appear inside the element instead of outside. Inset shadows create: pressed/active button states (inset 0 2px 4px rgba(0,0,0,0.3)), sunken text input wells (inset 0 1px 3px rgba(0,0,0,0.2)), and inner glow effects on focused elements. Inset shadows are clipped to the element's border-box and don't affect layout.

Can CSS box-shadow be animated?

Yes. box-shadow is an animatable CSS property — it can be transitioned smoothly: transition: box-shadow 0.3s ease. Animate elevation on hover: .card:hover { box-shadow: 0 8px 16px rgba(0,0,0,0.3); }. However, box-shadow animation is computationally expensive (triggers paint, not just compositing). For performance-sensitive animations, consider using opacity-animated pseudo-elements instead.

What is the difference between box-shadow and drop-filter shadow?

box-shadow applies to the rectangular border-box of the element, always rectangular (following border-radius). filter: drop-shadow() follows the actual alpha-composited shape of the element, including transparent areas — it works correctly with irregular shapes, PNG cutouts, and SVG elements. Drop-shadow filter is more computationally expensive but essential for non-rectangular elements like stars, icons, and custom shapes.

CSS Box-Shadow Generator – DataMorph