Box Shadow Generator

Generate CSS box-shadow with ease

Controls

Preview

Preview
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);

You Might Also Like

Explore more tools in this category

Email Extractor

Extract and validate email addresses from any text

Lottery Number Generator

Generate random lottery numbers for Powerball, Mega Millions, and more

CURL Command Generator

Build CURL commands visually with all options

Speed Test

Test your internet download and upload speed

Random Team Generator

Split people into random teams

Random Card Generator

Draw random playing cards from deck

Random Number Generator

Generate random numbers

Random Letter Generator

Generate random letters

Random Month Generator

Generate random months

About CSS Box Shadow Generator

The CSS Box Shadow Generator is a visual tool that helps you create beautiful box shadows for your web designs. Adjust parameters in real-time and see the results instantly. Perfect for designers and developers who want to add depth and dimension to their UI elements.

Box Shadow Parameters

Horizontal Offset (X)

Moves the shadow left (negative) or right (positive). 0 centers the shadow horizontally.

Vertical Offset (Y)

Moves the shadow up (negative) or down (positive). Positive values create a natural drop shadow effect.

Blur Radius:

Controls the blur amount. Higher values create softer, more diffused shadows. 0 creates a sharp shadow.

Spread Radius:

Expands (positive) or contracts (negative) the shadow size. Useful for creating glow effects.

Color & Opacity

Choose any color and adjust transparency. Lower opacity creates subtle shadows.

Inset

Creates an inner shadow instead of outer. Useful for pressed button effects.

Common Use Cases

  • Cards: Add depth to card components
  • Buttons: Create hover and active states
  • Modals: Separate overlays from background
  • Images: Add subtle shadows to photos
  • Navigation: Elevate header and sidebar elements
  • Forms: Highlight focused input fields

Shadow Presets

Soft Shadow

Subtle, minimal shadow for a clean, modern look.

Medium Shadow

Balanced shadow with good visibility and depth.

Hard Shadow

Strong, dramatic shadow for emphasis.

Inset Shadow

Inner shadow for pressed or recessed effects.

Best Practices

  • Use subtle shadows for a professional look
  • Keep opacity low (10-30%) for realistic shadows
  • Positive Y offset mimics natural light from above
  • Combine multiple shadows for complex effects
  • Use darker shadows for light mode, lighter for dark mode
  • Test shadows on different backgrounds
  • Consider performance with multiple shadows

Multiple Shadows

You can apply multiple box shadows by separating them with commas:

box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.1);

Browser Support

Box-shadow is supported by all modern browsers including Chrome, Firefox, Safari, Edge, and Opera. No vendor prefixes needed.