Guide

CSS Gradient Generator: Linear, Radial, and Conic Gradients Explained

Bill Crawford — Guide — February 2026 — 8 min read · Last updated October 20, 2025

Contents

Types of CSS gradients
Linear gradients
Radial gradients
Using the generator
Mastering color stops
Design tips

Create beautiful CSS gradients visually.

Types of CSS Gradients

CSS provides three gradient functions: linear-gradient(), radial-gradient(), and conic-gradient(). All are values of the background-image property — gradients are treated as images in CSS.

Linear Gradients

Linear gradients transition colors in a straight line from one direction to another:

/* Top to bottom (default) */
background: linear-gradient(#3b82f6, #8b5cf6);

/* Left to right */
background: linear-gradient(to right, #3b82f6, #8b5cf6);

/* Diagonal */
background: linear-gradient(135deg, #3b82f6, #8b5cf6);

/* Multiple color stops */
background: linear-gradient(to right, #ef4444, #f97316, #eab308, #22c55e, #3b82f6, #8b5cf6);

Direction can be specified as a keyword (to right, to bottom right) or an angle in degrees (0deg = up, 90deg = right, 180deg = down, 270deg = left).

Radial Gradients

Radial gradients radiate outward from a center point in an ellipse or circle shape:

/* Ellipse from center (default) */
background: radial-gradient(#3b82f6, #8b5cf6);

/* Circle at top-left */
background: radial-gradient(circle at top left, #3b82f6, #8b5cf6);

/* Specific size */
background: radial-gradient(circle 200px at center, #3b82f6, transparent);

Using the Generator

Choose gradient type

Select linear or radial. The preview updates instantly as you make changes.

Add color stops

Click + to add color stops. Each stop has a color and a position (0–100%). Drag stops to reposition them.

Set direction or center

For linear gradients, drag the angle dial or type a degree value. For radial, drag the center point.

Copy the CSS

Click Copy CSS to get the ready-to-paste background property value.

Mastering Color Stops

Color stops define where each color in the gradient begins and ends. The position (percentage) controls where the transition happens:

/* Hard stop — instant color change at 50% */
background: linear-gradient(to right, red 50%, blue 50%);

/* Delayed transition — hold red until 30%, then transition to blue */
background: linear-gradient(to right, red, red 30%, blue);

/* Multiple stops with explicit positions */
background: linear-gradient(to right,
  #ef4444 0%,
  #ef4444 25%,   /* solid red for first quarter */
  #3b82f6 75%,   /* solid blue for last quarter */
  #3b82f6 100%
);

Design Tips

Use HSL for natural transitions — gradients between two colors that are far apart on the color wheel often look muddy in the middle. Try intermediate color stops in HSL to steer around the gray zone.
Subtle gradients — single-hue gradients (same hue, slightly different lightness) look more professional and modern than dramatic multi-color gradients for backgrounds.
Layer gradients — CSS allows multiple background layers: background: linear-gradient(...), linear-gradient(...). Use this for complex effects like overlaying a color tint on a background image.
Accessibility — don't rely on gradient colors alone to convey information. Ensure text placed over gradients passes contrast requirements at every point in the gradient.

Frequently Asked Questions

Can I use gradients as text fill?▼

Yes — use background-clip: text with -webkit-background-clip: text and color: transparent to apply a gradient fill to text. This is widely supported but requires the -webkit- prefix in some browsers.

Do gradients affect page performance?▼

CSS gradients are rendered by the GPU and are very performant. They're preferable to gradient images (PNG/JPG) for backgrounds because they're scalable, require no network request, and can be animated with CSS transitions.

How do I make a gradient with transparency?▼

Use rgba() or hsla() color values with an alpha channel, or use transparent as a color stop keyword. Example: linear-gradient(to right, rgba(59,130,246,1), rgba(59,130,246,0)) fades a blue to fully transparent.

What's the difference between linear-gradient and repeating-linear-gradient?▼

repeating-linear-gradient() tiles the gradient pattern. If your gradient ends before 100%, the pattern repeats. It's used for striped backgrounds, progress indicators, and decorative patterns.