ToolPuma Logo

CSS Box Shadow Generator

Design box shadows and copy the CSS code.

10px
10px
20px
-5px
45%

What Is a CSS Box Shadow Generator?

The CSS Box Shadow Generator helps you craft precise shadows for any UI element. Control the X and Y offsets, blur, spread, color, opacity, and inset mode with live sliders, then copy the exact box-shadow declaration. Whether you want a subtle elevation on a card or a bold drop shadow, this tool gives designers complete control over depth and lighting.

How to Use This CSS Box Shadow Generator

  1. 1
    Adjust X and Y offset to control the shadow direction and distance.
  2. 2
    Set blur and spread to soften or expand the shadow.
  3. 3
    Pick a color and opacity, and toggle Inset for inner shadows.
  4. 4
    Copy the generated CSS box-shadow declaration.

Frequently Asked Questions

Spread expands (positive) or shrinks (negative) the shadow size relative to the box. A negative spread with a large blur creates a soft ambient shadow that hugs the element.
An inset shadow renders on the inside of the element's border, making it look like the light source is inside the box. It is commonly used for pressed or recessed elements.
Box shadows can be slower to render than solid colors, especially when blurred. For great performance, keep blur values reasonable and avoid animating large shadows frequently.

Related Color & Design Tools

Color Picker

Pick any color and get its HEX, RGB, and HSL values.

Color Palette Generator

Generate a harmonious color palette from a base color.

Random Color Generator

Generate random colors with HEX, RGB, and HSL values.

Gradient Generator

Create smooth two-color linear gradients instantly.

CSS Gradient Generator

Build linear or radial CSS gradients with color stops.

CSS Border Generator

Style borders with width, style, color, and radius.

More Color & Design Tools

CSS Border Radius Generator

Round element corners with live CSS output.

CSS Button Generator

Create styled buttons and copy the CSS code.

CSS Glassmorphism Generator

Make frosted glass style panels with backdrop blur.

CSS Neumorphism Generator

Generate soft UI neumorphism shadows with CSS.

CSS Text Shadow Generator

Add depth to text with custom text shadows.

Color Contrast Checker

Check the contrast ratio between two colors.