All tools

Box Shadow Generator

Design a CSS box-shadow in your browser with live preview — set offset, blur, spread, colour and inset, then copy the code.

Report a problem

How to use

  1. Drag the sliders for offset, blur and spread, and pick a shadow colour and opacity.
  2. Tick Inset for an inner shadow, and watch the box preview update live.
  3. Press Copy CSS and paste it into your stylesheet — nothing is uploaded.

FAQ

What do offset, blur and spread do?

Offset X/Y moves the shadow sideways and down; blur softens its edge; spread grows or shrinks the whole shadow before blurring. Together they range from a tight, crisp edge to a big, soft glow.

What is an inset shadow?

A normal shadow falls outside the box; an inset shadow is drawn inside it, which makes the element look pressed in or recessed. Tick Inset to switch between them.

Is anything uploaded?

No. The preview and CSS are generated entirely in your browser, so nothing you set leaves your device. It works offline.