Home / Design Tools / CSS Shadow Generator

CSS Shadow Generator

Craft box-shadows visually - offset, blur, spread, opacity.

How to use

  1. Drag the sliders until the preview looks right.
  2. Negative spread keeps shadows tight and modern.
  3. Copy the CSS.

Frequently asked questions

What makes a shadow look professional?

Large blur, slight negative spread and low opacity (15-25%) - soft and diffused beats dark and harsh.

Related tools

  • CSS Border Radius Generator — Per-corner border radius with live preview - including organic blob shapes.
  • CSS Clip Path Generator — Ready-made clip-path shapes - triangle, hexagon, star, arrow and more.
  • SVG Optimizer — Shrink SVG files with SVGO - same engine as build tools.
  • Icon Generator — One image → every iOS, Android and web app icon size, zipped.
  • Favicon Generator — One logo in - a complete favicon pack out: ICO, PNGs, Apple touch icon, manifest and HTML.
  • CSS Gradient Generator — Design linear and radial gradients with live preview and CSS out.

See all design tools