CSS Box Shadow Generator

What is CSS Box Shadow?

The box-shadow CSS property adds shadow effects around an element's frame. You can set multiple shadow effects separated by commas, making it possible to create complex, layered depth that mimics real-world lighting. A box shadow is described by X and Y offsets relative to the element, blur and spread radius, and color. It is one of the most effective properties for adding depth to flat UI designs without using images.

How Box Shadow Works

The box-shadow property accepts several values that control the shadow's appearance:

• Offset-X: Moves the shadow horizontally. Positive values push it right; negative values push it left.
• Offset-Y: Moves the shadow vertically. Positive values push it down; negative values push it up.
• Blur Radius: Controls how soft or sharp the shadow's edges are. A value of 0 creates a hard-edged shadow; higher values create progressively softer, more diffused shadows.
• Spread Radius: Expands or contracts the shadow. Positive values make the shadow larger than the element; negative values shrink it.
• Color: Defines the shadow's color. Using low-opacity colors (like rgba(0,0,0,0.15)) produces natural-looking shadows.

Best Practices for UI Shadows

• Use low opacity: Shadows with 0.08–0.2 opacity look more natural than fully opaque black shadows.
• Keep offsets small: Large X/Y offsets look unrealistic. Stick to 0–10px for modern UI elevation.
• Layer two shadows: A sharp, close shadow (low blur) combined with a soft, distant shadow (high blur) creates convincing depth.
• Match your palette: If you generate color palettes with cool tones, use a slightly cool-tinted shadow (like rgba(0,0,40,0.1)) instead of pure black.
• Use inset for inputs: Inset shadows on form fields create a subtle "recessed" look that signals interactivity.

How to Use This Generator

1. Adjust Position: Use the X and Y offset sliders to move the shadow direction.
2. Set Blur & Spread: Increase blur for softer edges; adjust spread to resize the shadow area.
3. Pick Color & Opacity: Choose a shadow color and lower the opacity for a natural look.
4. Toggle Inset: Check the inset box to create inner shadows for inputs and pressed states.
5. Copy Code: Click Copy to grab the box-shadow CSS and paste it into your stylesheet.

Need to convert HEX to RGB for your shadow color values? Use our color converter for quick format changes.

Common Mistakes in Box Shadow Usage

• Using pure black at full opacity: This creates harsh, unrealistic shadows. Always reduce opacity to 0.15 or below.
• Overusing large offsets: Shadows that are offset too far make elements look disconnected from the surface.
• Ignoring dark mode: The same shadow that looks subtle on white may be invisible on dark backgrounds. Increase opacity slightly for dark themes.
• Too many shadow layers: Three or more shadows can hurt performance on pages with many elements. Stick to two layers maximum.
• Forgetting spread: A small negative spread (-1px to -3px) tightens the shadow and prevents it from overflowing rounded corners.

To learn color combinations that pair well with your shadow styles, check out our palette guide.

Frequently Asked Questions