Skip to main content

CSS Gradient & Box Shadow Generator

Build linear / radial CSS gradients and box-shadows visually with sliders, color pickers, and presets.

135°
background 
 
 
 
 
   
   
 
 
About this tool
 
 
  
CSS Gradient & Box Shadow Generator lets you design Tailwind / CSS visually with sliders, color pickers, and clickable presets. Switch between the Gradient and Shadow tabs.
Gradient tab
  • Type: linear or radial.
  • Angle: 0-360° (linear only).
  • Color stops: add up to as many as you want, drag the percentage sliders to position them. Two stops are enough for most designs; three or four make richer palettes.
  • Presets: Sunset, Ocean, Forest, Dawn, Mono — common starter gradients.
Shadow tab
  • Offset X / Y: how far the shadow is offset (in px). Negative values move it up / left.
  • Blur radius: 0 for sharp, 40+ for very soft.
  • Spread: positive values grow the shadow outward, negative values shrink.
  • Opacity: 0-100, mixes with the picker color.
  • Color: any hex value.
  • inset: pulls the shadow inside the box (used for pressed buttons, inset image edges).
About the CSS output
The generated CSS uses background: for gradients and box-shadow: for shadows. Both are drop-in for Tailwind config or your CSS file. The hex color in the gradient stops gets copied verbatim so what you see is what you ship.
Tip: dual shadows
Paste two box-shadow: declarations (separated by comma) for a layered shadow effect: a tight one for a lift, a wide one for an ambient glow. This tool only generates a single shadow at a time.
Privacy
No network call. All design runs in your browser.