ToolPremier Logo
ToolPremier

Home  ›  Developer Tools  ›  Box Shadow Generator

Box Shadow Generator
Build CSS box shadows visually – adjust offset, blur, spread, color, and opacity with live preview, then copy the box-shadow property ready to use.
✓ Free✓ No signup✓ Privacy first✓ Runs in your browser
Box Shadow Generator – ToolPremier
#000000

Visual CSS box shadow builder · live preview · inset support · copy CSS instantly

How it works
Convert in three steps

1. Set your shadow values

Use sliders to set horizontal offset, vertical offset, blur radius, spread radius, color, and opacity. Toggle between outer (box-shadow) and inner (inset) shadows.

2. Add multiple layers

Stack multiple shadow layers for more complex effects - soft ambient shadows combined with a sharp directional layer, or coloured glow effects.

3. Copy the CSS

Get the complete box-shadow value - single or multi-layer - ready to paste into your stylesheet.

FAQ
Common questions
The five parameters are: horizontal offset (positive moves shadow right), vertical offset (positive moves shadow down), blur radius (higher = softer edge), spread radius (positive = larger shadow, negative = tighter), and color (including opacity via rgba or hsla). The optional inset keyword moves the shadow inside the element rather than outside it.
Natural shadows typically use a low opacity (15-30%), significant blur (8-24px), minimal spread (0 or slightly negative), and a color tinted toward the element background rather than pure black. Stacking two layers – a large, soft ambient shadow and a smaller, slightly sharper drop shadow – mimics how physical shadows look under diffuse lighting.
box-shadow applies to the element rectangular bounding box – including areas with border-radius, but not following the shape of transparent cutouts. filter: drop-shadow() follows the actual rendered pixel shape, including PNG transparency and irregular shapes. For elements with transparent areas (like a PNG icon or a clipped shape), drop-shadow gives more accurate results.
box-shadow does not affect layout – it does not add to the element dimensions or push other elements around. It is composited by the browser and generally has minimal performance impact for static elements. Animating box-shadow, however, triggers layout recalculation in some browsers – for animated shadows, consider using filter: drop-shadow() or opacity-animating a pseudo-element shadow instead.
Keep going
Related tools

CSS Gradient Generator

Add gradient backgrounds to elements with your box shadow.

Open tool

Border Radius Generator

Round the corners of the elements your shadows are applied to.

Open tool

CSS Grid Generator

Build the grid layout that houses your shadowed components.

Open tool

Flexbox Playground

Arrange shadowed cards and elements in Flexbox layouts.

Open tool
About the Box Shadow Generator
Box shadow is one of the most used – and most fiddled-with – CSS properties in UI development. Getting the right combination of blur, spread, offset, and opacity for a natural-looking shadow requires constant iteration. Editing the values blind in a stylesheet and refreshing the browser to check the result is slow. This generator gives you immediate visual feedback: every slider and color control updates the live preview instantly, and you can stack multiple shadow layers to create depth effects, glows, and inner shadows without leaving the browser tab. Copy the resulting box-shadow value and paste it directly into your CSS.
Benefits
  • All parameters controlled visually - offset, blur, spread, color, opacity, and inset toggle.
  • Multi-layer shadow stacking - create complex depth effects by combining multiple shadow definitions.
  • Live preview on a configurable background - test your shadow against light and dark backgrounds.
  • Copy-ready CSS output - single box-shadow value for direct stylesheet use.
Privacy
All shadow generation runs client-side. No design data is transmitted to any server.