Gradients· new

CSS Gradient Generator

Linear, radial, conic — with draggable stops, live preview, and copyable CSS / Tailwind / SVG output.

Previewclick anywhere to add a stop
linear
Color stops
click to add · drag to reposition · 2 stops
Stops
#
%
#
%
Type
Angle
°
Output
styles.css
background: linear-gradient(135deg, #7C5CFF 0%, #F0B5FF 100%);
Presets

Twelve curated gradients to start from. Click any to load — then keep editing.

How to use the CSS Gradient Generator

A CSS gradient is a set of color stops the browser interpolates between. The editor maps each stop to a position on the bar and lets you set the type — linear (along an angle), radial (out from a point) or conic (around a center) — then writes the matching linear-gradient(), radial-gradient() or conic-gradient() syntax for you in real time.

  1. 1
    Choose a gradient type

    Pick linear, radial or conic, or start from one of the built-in presets.

  2. 2
    Edit the color stops

    Drag stops along the bar, click the preview to add a stop, and recolor any stop with the picker.

  3. 3
    Set the direction

    Dial in the angle for linear gradients or the origin point for radial and conic ones.

  4. 4
    Copy or download

    Copy the gradient as CSS, a Tailwind class or SVG, or download it as a PNG or SVG file.

Frequently asked

What is the difference between linear, radial and conic gradients?
Linear blends colors along a straight line at a given angle, radial blends outward from a center point in rings, and conic sweeps colors around a center like a pie chart.
How do I change the direction of a CSS gradient?
For linear gradients set the angle (for example 135deg); the editor updates the angle and rewrites the CSS as you drag.
Can I add more than two colors?
Yes — click anywhere on the gradient bar or preview to add a stop, and you can place as many stops as you need.
Why does my gradient look banded?
Banding appears when colors are far apart with few stops or on low-bit displays. Adding intermediate stops smooths the transition.

More gradients

Mesh Gradient
Generate modern multi-point mesh gradients and export the CSS.
Gradient Palette
Sample an even palette of stops along any gradient.