CSS Gradient Generator

CSS output

background: linear-gradient(
  135deg,
  #673de6 0%,
  #9f7aea 50%,
  #22d3ee 100%
);

Gradient type

Colors

Click the rail to add a stop, drag a marker to reposition it.

Stop 1 of 3

3 of 6 stops used — at least 2 required.

Direction

Quick presets

Output & Presets

Presets

How it works

Click anywhere on the color rail to add a stop at that spot, or drag an existing marker to reposition it — arrow keys nudge the selected stop, Delete removes it.
Linear gradients use an angle; radial gradients use a shape and position; conic gradients rotate around a starting angle and position.
Reverse Colors flips the stop order without changing positions; Random Gradient keeps the current type but shuffles colors and positions.
Download PNG renders the exact gradient you see to an image file, sized for use as a background or banner.

Need a custom design system?

I can turn gradients, color systems, and UI details like this into a fast, polished WordPress site — built with Elementor, custom CSS, and clean, maintainable code.

Start a Project