Generate CSS box-shadow declarations visually. Adjust offsets, blur, spread, color, and export CSS rules.
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.
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.
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.
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.
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.
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.
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.
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.