Skip to content
Convertto

CSS Box Shadow Generator

Design a CSS box-shadow with live values for offset, blur, spread and colour.

To generate a CSS box-shadow, adjust the horizontal and vertical offset, blur radius, spread and colour opacity. The tool outputs ready-to-paste CSS plus a layered two-shadow version, which reads as far more realistic elevation than a single shadow.

Runs in your browser
Privacy
Runs entirely in your browser — nothing is uploaded
Cost
Free, unlimited, no sign-up

Frequently asked questions

What makes a shadow look realistic?

Layering. A single large blur reads as fake; two or three shadows with increasing blur and decreasing opacity mimic how real light falls off. Keep them all in the same direction, as one light source would.

How to use the css box shadow generator

  1. 1Set the horizontal offset.
  2. 2Set the vertical offset.
  3. 3Set the blur radius.
  4. 4Set the spread.
  5. 5Pick the shadow colour.
  6. 6Set the opacity.
  7. 7Turn "Inset (inner shadow)" on or off as needed.
  8. 8The result appears immediately — copy or download it.

Embed this tool

Put the working css box shadow generator on your own site. It runs in your visitors' browsers exactly as it does here — free, no account, nothing uploaded.

Share this tool

Related tools

Glassmorphism CSS GeneratorCreate frosted-glass CSS with backdrop blur, transparency and a subtle border.CSS Gradient GeneratorBuild linear, radial and conic CSS gradients and copy the code.CSS Border Radius GeneratorDrag eight handles to shape every corner: elliptical radii, inverted corners and squircles.CSS Button GeneratorDesign a button and copy the CSS, including the hover, active and focus-visible states.CSS Shape GeneratorGenerate triangles, arrows, stars and other shapes using pure CSS.CSS Text Shadow GeneratorDesign text shadows, outlines and glow effects with a live preview.

Last updated

More css generators