Back to Tools

Design ยท CSS gradients

Build a gradient, copy the CSS

Linear, radial, and conic gradients with live preview. Save presets and copy production-ready CSS.

Runs locally

CSS output

background: linear-gradient(to right, #ff6b6b 0%, #4ecdc4 100%);

Sample surfaces

  • Background
  • Gradient
    Text fill
  • Border
    Border image

Presets

  • Sunset
  • Ocean
  • Forest
  • Fire
  • Aurora

Gradients are rendered with native CSS. Saved presets live in your browser's localStorage.