CSS Gradient Generator

Design a linear or radial CSS gradient with live preview, then copy the CSS.

100% private — runs entirely in your browser. Your data is processed on your device and never sent to the internet.

About this tool

This free CSS gradient generator lets you design a linear or radial gradient with as many color stops as you like, set the angle, preview it live, and copy the ready-to-use CSS.

Everything runs in your browser — nothing is uploaded.

Features

  • Linear or radial gradients
  • Multiple color stops with adjustable positions
  • Angle control for linear gradients
  • Live preview and one-click copy CSS

How to use it

  • Pick a type — linear or radial
  • Set your color stops — change colors and drag their positions, add more if needed
  • Adjust the angle (linear)
  • Copy the CSS — paste it straight into your stylesheet

More tools

View all