CSS Box Shadow Generator

Shadow Controls
Offset X 4px
Offset Y 6px
Blur 12px
Spread 0px
Opacity 30%
Color
Inset shadow
Shadow Layers
Presets
Live preview
preview




Copied!
  
Create and customize CSS box shadows instantly with our free, visual CSS Box Shadow Generator. See live previews, tweak offsets, blur, spread, and color, and copy-ready code for your projects in seconds.
How to Use the CSS Box Shadow Generator
Follow these simple steps to generate your perfect box shadow:
  1. Select Shadow Type: Choose between outer (default) or inner (inset) shadow.
  2. Adjust Offsets: Set horizontal and vertical shadow distances using sliders or input boxes.
  3. Set Blur & Spread: Control the blur radius for softness and spread radius for shadow expansion.
  4. Pick Shadow Color: Use the color picker or enter HEX/RGB values for precise control.
  5. Live Preview: Watch your shadow applied to a sample box in real-time.
  6. Copy CSS Code: Click “Copy Code” to instantly add the CSS to your website or project.
This interactive tool removes guesswork, letting you experiment visually without writing code manually.
What is CSS Box Shadow (Syntax & Properties Explained)
The box-shadow property in CSS lets you add shadows to HTML elements for depth, emphasis, or style.
Syntax:
box-shadow: offset-x offset-y blur-radius spread-radius color inset;
Properties Explained:
  • offset-x: Horizontal distance of the shadow (positive moves right, negative left)
  • offset-y: Vertical distance of the shadow (positive moves down, negative up)
  • blur-radius: How soft the shadow appears (0 = sharp edges)
  • spread-radius: Expands or contracts the shadow size
  • color: Shadow color (HEX, RGB, or RGBA)
  • inset (optional): Makes the shadow appear inside the element
Example:
box-shadow: 4px 4px 10px rgba(0,0,0,0.2);
This adds a soft, subtle shadow 4px to the right and bottom.
Practical Examples of CSS Box Shadows
Here are some common design use cases for box shadows:
  • Buttons: Highlight hover or pressed states with subtle shadows.
  • Cards: Add depth to cards or panels in UI design.
  • Modals & Popups: Emphasize overlays with soft shadows.
  • Multiple Shadows: Stack shadows for layered or glow effects:
box-shadow: 2px 2px 5px rgba(0,0,0,0.2), -1px -1px 3px rgba(0,0,0,0.1);

How to use the CSS Box Shadow Generator
Box Shadow Formula & Worked Examples
Basic Shadow:
box-shadow: 4px 4px 10px rgba(0,0,0,0.2);
A subtle shadow that slightly lifts the element off the page.
Bold Shadow:
box-shadow: 8px 8px 20px rgba(0,0,0,0.4);
A deeper shadow for pronounced elevation.
Inset Shadow Example:
box-shadow: inset 2px 2px 5px rgba(0,0,0,0.2);
Creates an inner shadow effect, perfect for pressed buttons or recessed elements.
Tips & Best Practices for CSS Shadows
  • Use subtle shadows for minimalistic designs to enhance UI without overwhelming it.
  • Match shadow opacity to background contrast for visual clarity.
  • Combine multiple shadows sparingly to avoid cluttered designs.
  • Use shadows consistently across similar elements for cohesion.
  • Test across different screen sizes and devices for optimal visibility.
Related Tools
Enhance your web design with these related tools:
Frequently Asked Questions





 What is a box-shadow in CSS?





It’s a CSS property that adds shadow effects behind or inside HTML elements.






Yes, separate each shadow with a comma in the CSS box-shadow property.






Absolutely! Generate unlimited CSS box shadows online instantly.






Yes, the generated CSS is standard and works on all modern browsers.






All major browsers including Chrome, Firefox, Safari, and Edge fully support it.