CSS Box Shadow Generator

Generate CSS box-shadow values visually. Adjust horizontal offset, vertical offset, blur radius, spread radius, opacity, and color with sliders. Live preview, inset mode, and one-click copy. 100% browser-based.

100% Client-Side Your data never leaves your browser Free · No Sign-Up
5px
5px
10px
0px
30%
Preview
Generated CSS

Related Tools

UUID Generator Generate v4 UUIDs instantly — single or batch. Color Converter Convert colors between HEX, RGB, and HSL formats with a live color preview. Regex Tester Test regular expressions in real time with match highlighting and capture group details. Timestamp Converter Convert Unix timestamps to human-readable dates and vice versa. Auto-detects seconds vs milliseconds. QR Code Generator Generate QR codes from URLs, text, Wi-Fi credentials, and more. Download as PNG. Cron Expression Parser Parse and explain cron expressions in plain English. Preview next 10 scheduled run times.

How to Use

  1. Adjust the Horizontal Offset and Vertical Offset sliders to position the shadow.
  2. Increase Blur Radius for a softer shadow edge, or set it to 0 for a hard shadow.
  3. Use Spread Radius to expand or shrink the shadow’s size beyond the element.
  4. Set Opacity to control how transparent the shadow is.
  5. Pick a Shadow Color using the color picker or type a hex value directly.
  6. Toggle Inset to switch between outer and inner shadow modes.
  7. The Preview box updates in real time as you adjust any control.
  8. Click Copy to copy the generated box-shadow CSS value to your clipboard.

box-shadow Syntax Reference

/* Basic outer shadow */
box-shadow: offsetX offsetY blur spread color;

/* Inset shadow */
box-shadow: inset offsetX offsetY blur spread color;

/* Multiple shadows */
box-shadow: shadow1, shadow2, shadow3;

Common Use Cases

  • Card elevation: box-shadow: 0 4px 16px rgba(0,0,0,0.12) — subtle floating card effect
  • Hard drop shadow: box-shadow: 4px 4px 0 rgba(0,0,0,1) — retro / bold design style
  • Focus ring: box-shadow: 0 0 0 3px rgba(59,130,246,0.5) — accessible focus indicator
  • Inner shadow (input field): box-shadow: inset 0 2px 4px rgba(0,0,0,0.1)
  • Glow effect: box-shadow: 0 0 20px rgba(99,102,241,0.6) — neon or glow highlight

CSS Variables Integration

You can store your shadow values in CSS custom properties for consistent reuse across a design system:

:root {
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.15);
  --shadow-focus: 0 0 0 3px rgba(59, 130, 246, 0.45);
}

.card { box-shadow: var(--shadow-md); }
.card:focus { box-shadow: var(--shadow-focus); }

Related Tools

FAQ

What is the CSS box-shadow property?

The CSS box-shadow property adds one or more shadow effects to an element. Each shadow is defined by horizontal offset, vertical offset, blur radius, spread radius, and color. Adding the inset keyword makes the shadow appear inside the element's border.

What does each slider control?

Horizontal Offset moves the shadow left (negative) or right (positive). Vertical Offset moves it up (negative) or down (positive). Blur Radius controls how blurry the shadow edge is — 0 means a sharp edge. Spread Radius expands or shrinks the shadow size. Opacity controls the shadow's transparency from 0% (invisible) to 100% (fully opaque).

What is inset shadow?

The inset keyword makes the shadow appear inside the element instead of outside. It gives the effect of a depressed or recessed surface, commonly used for input fields or pressed buttons.

What color format does the tool output?

The tool outputs rgba() color values, which include the opacity channel directly in the color function. This ensures accurate rendering across all modern browsers.

Can I use multiple box shadows?

Yes — CSS supports multiple shadows by separating them with commas: box-shadow: 2px 2px 4px rgba(0,0,0,0.2), -2px -2px 4px rgba(255,255,255,0.8). You can combine values from this tool manually to create multi-layer effects.

Is this tool client-side?

Yes. All generation happens in your browser. No data is sent to a server.