← Back to Tools

Box Shadow Generator

Create CSS box shadows visually

Design perfect CSS box shadows with our intuitive visual generator. Adjust horizontal and vertical offsets, blur radius, spread, and color with real-time preview. Create subtle depth effects or dramatic shadows for cards, buttons, and containers. Add multiple shadow layers for complex effects. Copy the generated CSS code directly into your stylesheet for immediate use in your web projects.

Shadow Settings
Shadow Layer 1
Preview

CSS Code:

How to Use Box Shadow Generator

  • Offsets: Use horizontal/vertical offsets to position the shadow relative to the element.
  • Blur: Increase blur radius for softer, more diffused shadows.
  • Spread: Positive values expand the shadow, negative values shrink it.
  • Color & Opacity: Choose shadow color and transparency level.
  • Inset: Check for inner shadows that appear inside the element.
  • Multiple Layers: Add layers for complex, realistic shadow effects.

Example

For a subtle card shadow: Set horizontal to 0, vertical to 4, blur to 20, spread to 0, color black at 10% opacity. For a hover effect, add a second layer with vertical offset 8, blur 30, and 15% opacity for more depth.

Frequently Asked Questions

Q: How do I create a realistic shadow?
A: Use multiple shadow layers with different blur and offset values. Typically, a soft diffused shadow (high blur, low opacity) combined with a tighter shadow (lower blur) creates realistic depth.

Q: What's the difference between blur and spread?
A: Blur softens the shadow edges (the shadow fades out), while spread expands or contracts the shadow size uniformly in all directions without affecting sharpness.

Related Tools

CSS Gradient Generator

Create CSS gradients visually

Color Picker

Pick and convert colors

Color Palette Generator

Generate color schemes

CSS Minifier

Compress CSS code