Create beautiful box shadows visually and copy the CSS
Adjust offset, blur, spread, color with sliders. Toggle inset. Add multiple. Live preview. Copy CSS.
Trial and error is tedious. Visually design shadows and get production CSS instantly.
Yes, layer multiple with different values.
Blur: soft edges; Spread: expand/contract shadow.
Inner shadow inside element for pressed effect.
Yes, all modern browsers.
Box-shadow adds depth to elements by simulating light casting shadows. Syntax: box-shadow: offset-x offset-y blur-radius spread-radius color. The offset positions the shadow (positive = down/right). Blur softens edges. Spread expands or contracts the shadow. Color with alpha controls opacity. Use shadows to elevate cards, modals, buttons on hover, and floating action buttons. Material Design and iOS design both rely heavily on shadows for visual hierarchy.
Realistic shadows mimic natural light: multiple shadows at different y-offsets, larger blur radii for farther shadows, lower opacity. box-shadow: 0 1px 2px rgba(0,0,0,0.05), 0 4px 8px rgba(0,0,0,0.1); (Material Design card). Flat shadows use uniform offset, blur, and color for a sharp geometric look — popular in brutalist and Memphis design styles. Modern minimal UIs use very subtle shadows: just a few pixels of blur and 5-10% opacity black. Avoid heavy black shadows; they look dated.
Shadows are GPU-accelerated and generally fast, but multiple shadows on many elements can cause repaint issues on low-end devices. Animated shadows (changing on hover) trigger layout passes — animate opacity and transform instead. Inner shadows (inset keyword) are slower than outer shadows. Large blur radii on big elements are expensive. For mobile performance, prefer single subtle shadows over layered heavy ones.
Design CSS box shadows visually with the Toolzie CSS Box Shadow Generator. Adjust horizontal offset, vertical offset, blur, spread, colour, and opacity with live preview — then copy the ready-to-use CSS code.
Yes — click 'Add Shadow' to layer multiple shadows on the same element, just like CSS allows.
Inset moves the shadow inside the element instead of outside, creating a pressed-in or inner glow effect.
Yes — box-shadow is fully supported in all modern browsers without vendor prefixes.
Yes — the background colour of the preview area can be adjusted to see how your shadow looks on different surfaces.