Preview

12px

Shadow Layers

px
px
px
px
15%

CSS Code

box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.15);

Presets

Properties

Horizontal Offset

Positive moves shadow right, negative moves it left.

Vertical Offset

Positive moves shadow down, negative moves it up.

Blur Radius

Higher values create a softer, more diffused shadow.

Spread Radius

Positive expands the shadow, negative shrinks it.

Inset

Creates an inner shadow inside the element.

About CSS Box Shadow Generator

Design stunning CSS box shadows with our visual builder. Add multiple shadow layers, fine-tune offsets, blur, spread, and opacity, and copy the CSS code with one click.

✓Multiple shadow layers
✓Inset shadow support
✓12 beautiful presets
✓One-click CSS code copy

Complete Guide to CSS Box Shadows

Free Online CSS Box Shadow Generator

Create beautiful CSS box shadows with our free visual shadow builder. Design outer and inset shadows with precise control over offset, blur radius, spread, color, and opacity. Perfect for web designers, front-end developers, and UI/UX professionals looking to add depth and dimension to their websites.

What Is CSS Box Shadow?

The CSS box-shadowproperty adds shadow effects around an element's frame. It allows you to create depth, elevation, and visual hierarchy in your web designs. Box shadows can be outer (default) or inset, and you can stack multiple shadows on a single element for complex effects.

Box Shadow Properties

📐 Offset (X & Y)

  • Horizontal offset moves shadow left/right
  • Vertical offset moves shadow up/down
  • Positive values go right/down
  • Negative values go left/up
  • Zero creates a centered shadow

🌫️ Blur & Spread

  • Blur radius softens the shadow edge
  • Higher blur = softer, more diffused
  • Spread expands or contracts the shadow
  • Positive spread enlarges the shadow
  • Negative spread shrinks the shadow

🎨 Color & Opacity

  • Any CSS color value is supported
  • RGBA for semi-transparent shadows
  • Dark colors for depth shadows
  • Colored shadows for glow effects
  • Lower opacity for subtle shadows

🔲 Inset Shadows

  • Creates shadow inside the element
  • Used for pressed/embedded effects
  • Combined with outer for neumorphism
  • Inner glow and lighting effects
  • Can be stacked with outer shadows

CSS Box Shadow Syntax

/* Basic Shadow */

box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.15);

/* With Spread */

box-shadow: 0px 4px 10px 2px rgba(0, 0, 0, 0.15);

/* Inset Shadow */

box-shadow: inset 0px 2px 8px rgba(0, 0, 0, 0.2);

/* Multiple Shadows */

box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1),

            0px 2px 4px rgba(0, 0, 0, 0.06);

Key Features

🎨 Visual Builder

  • Interactive live preview
  • Range sliders for all properties
  • Color picker with hex input
  • Adjustable preview box & background
  • Customizable border radius

📋 CSS Output

  • Real-time CSS code generation
  • Copy shadow value or full property
  • Clean, production-ready code
  • RGBA color output for opacity
  • Works in all modern browsers

✨ Presets & Layers

  • 12 professional shadow presets
  • Multiple shadow layer support
  • Duplicate & edit layers easily
  • Inset shadow toggle
  • One-click preset loading

⚡ Design Patterns

  • Material Design elevation
  • Neumorphism / soft UI
  • Neon glow effects
  • Layered depth shadows
  • Sharp retro shadows

How to Use This Tool

  1. Adjust Offsets: Use the horizontal and vertical sliders to position the shadow.
  2. Set Blur: Increase blur for softer shadows, or set it to 0 for sharp edges.
  3. Set Spread: Expand the shadow with positive values or shrink it with negative values.
  4. Pick Color: Choose a shadow color and adjust the opacity for transparency.
  5. Toggle Inset: Check the “Inset” option to create inner shadows.
  6. Add Layers: Click “Add Shadow” to stack multiple shadow layers.
  7. Try Presets: Browse and click presets for instant shadow styles.
  8. Copy CSS: Copy the shadow value or full CSS property to your clipboard.

Shadow Design Tips

Use Low Opacity: Realistic shadows are subtle. Start with 10-20% opacity rather than solid black.

Layer Multiple Shadows: Stacking 2-3 soft shadows creates more natural depth than a single heavy shadow.

Match Light Direction: Keep shadow direction consistent across your page for a cohesive look.

Use Colored Shadows: For colored elements, use a slightly darker shade of the element color as the shadow color.

Avoid Over-Shadowing: Too many heavy shadows can make a design look cluttered. Be selective.

Browser Compatibility

Box Shadow: Fully supported in all modern browsers including Chrome, Firefox, Safari, Edge, and Opera since IE9+.

Multiple Shadows: Supported in all modern browsers. Multiple shadow layers are comma-separated.

Vendor Prefixes: No vendor prefixes needed. The standard syntax works everywhere.

Perfect For

  • Web designers
  • Front-end developers
  • UI/UX designers
  • WordPress developers
  • Tailwind CSS users
  • Bootstrap developers
  • Landing page builders
  • App developers
  • Component library builders
  • Design system creators
  • Full-stack developers
  • Students learning CSS

🔒 Complete Privacy Protection

All shadow generation happens entirely in your web browser using JavaScript. No data is sent to any server. Your design work remains completely private and secure.

Related Design & Code Tools

{ }

CSS Gradient Generator

Create beautiful linear, radial, and conic CSS gradients visually.

Color Picker

Pick colors and convert between HEX, RGB, HSL, and more color formats.

Image Editor

Edit images with filters, adjustments, crop, and more design tools.

CSS Minifier

Minify your CSS code including box shadows for production deployment.

Code Diff Checker

Compare CSS files side by side to see shadow changes and other diffs.

HTML Table Generator

Create styled HTML tables with shadow effects and custom styling.