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 CSS box shadows with a visual builder. Add multiple shadow layers, fine-tune offsets, blur, spread, and opacity, then 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 outer and inset shadows with precise control over offset, blur radius, spread, color, and opacity. This visual builder is useful for adding depth, elevation, and glow effects to interfaces.

What Is CSS Box Shadow?

The CSS box-shadow property adds shadow effects around an element frame. Shadows can sit outside the element or be inset, and multiple shadows can be stacked for richer effects. box-shadow

Box Shadow Properties

Offset (X and Y)

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

Blur and Spread

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

Color and Opacity

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

Inset Shadows

  • Creates a shadow inside the element
  • Useful for pressed or embedded effects
  • Can combine with outer shadows
  • Works for inner glow and lighting effects
  • Can be stacked with other 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 and 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 modern browsers

Presets and Layers

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

Design Patterns

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

How to Use This Tool

  1. Adjust Offsets: Use 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 opacity for transparency.
  5. Toggle Inset: Enable inset to create inner shadows.
  6. Add Layers: Add multiple shadows and edit each layer separately.
  7. Try Presets: Load ready-made shadow styles instantly.
  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 one heavy shadow.

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

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

Avoid Over-Shadowing: Too many heavy shadows can make a design feel cluttered.

Browser Compatibility

Box Shadow: Supported in all modern browsers including Chrome, Firefox, Safari, Edge, and Opera.

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

Vendor Prefixes: No vendor prefixes are needed for standard box-shadow syntax.

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 browser using JavaScript. No data is sent to any server, so your design work remains private.

Related Design and Code Tools

{ }

CSS Gradient Generator

Create 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 other design tools.

CSS Minifier

Minify CSS code including box shadows for production deployment.

Code Diff Checker

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

HTML Table Generator

Create styled HTML tables with shadow effects and custom styling.