CSS Gradient Generator: How to Create Linear, Radial, and Conic Gradients

Why CSS gradients (not images)

Before CSS gradients, backgrounds required image files — a performance cost and a maintenance headache. CSS gradients generate the visual directly in the browser with no HTTP request, scale to any size without pixelation, and are easily changed via code without editing image files.

CSS gradients are a value type, not a property — they're used anywhere a <gradient> value is accepted, primarily background-image and background. A gradient is technically treated as an image of infinite resolution.

Linear gradients

The most common type — colors transition along a straight line.

/* Basic: top to bottom */
background: linear-gradient(#ff6b6b, #4ecdc4);

/* With direction */
background: linear-gradient(to right, #ff6b6b, #4ecdc4);
background: linear-gradient(45deg, #ff6b6b, #4ecdc4);

/* Multiple color stops */
background: linear-gradient(to right, #ff6b6b, #feca57, #4ecdc4);

/* Positioned color stops */
background: linear-gradient(to right, #ff6b6b 0%, #feca57 40%, #4ecdc4 100%);

/* Hard color stops (no transition) */
background: linear-gradient(to right, #ff6b6b 50%, #4ecdc4 50%);

The direction can be a keyword (to right, to bottom right) or an angle in degrees. 0deg is bottom-to-top; degrees increase clockwise. 90deg is left-to-right.

Radial gradients

Colors radiate from a center point — creating circular or elliptical patterns.

/* Default: circle at center */
background: radial-gradient(#ff6b6b, #4ecdc4);

/* Explicit shape */
background: radial-gradient(circle, #ff6b6b, #4ecdc4);
background: radial-gradient(ellipse, #ff6b6b, #4ecdc4);

/* Positioned center */
background: radial-gradient(circle at top left, #ff6b6b, #4ecdc4);
background: radial-gradient(circle at 30% 70%, #ff6b6b, #4ecdc4);

/* Multiple stops */
background: radial-gradient(circle, #ff6b6b 20%, #feca57 60%, #4ecdc4 100%);

The position after at accepts keywords (center, top left) or percentages. This controls where the gradient emanates from.

Conic gradients

Colors rotate around a center point — like a pie chart or color wheel.

/* Basic conic */
background: conic-gradient(#ff6b6b, #4ecdc4);

/* From a specific angle */
background: conic-gradient(from 90deg, #ff6b6b, #4ecdc4);

/* Pie chart effect */
background: conic-gradient(
  #ff6b6b 0% 25%,    /* 25% red */
  #feca57 25% 60%,   /* 35% yellow */
  #4ecdc4 60% 100%   /* 40% teal */
);

/* Color wheel */
background: conic-gradient(
  red, yellow, lime, cyan, blue, magenta, red
);

Conic gradients are supported in all modern browsers (Chrome 69+, Firefox 83+, Safari 12.1+). Use @supports to provide a fallback for older browsers if needed.

Repeating gradients

All three gradient types have repeating variants that tile the gradient:

/* Striped pattern */
background: repeating-linear-gradient(
  45deg,
  #ff6b6b,
  #ff6b6b 10px,
  #4ecdc4 10px,
  #4ecdc4 20px
);

/* Repeating radial rings */
background: repeating-radial-gradient(
  circle,
  #ff6b6b 0px,
  #ff6b6b 5px,
  transparent 5px,
  transparent 15px
);

Layering gradients

Multiple gradients can be layered using comma separation in background — the first gradient listed is on top:

background:
  linear-gradient(rgba(255,107,107,0.5), transparent),
  radial-gradient(circle at 80% 20%, #4ecdc4, transparent 60%),
  #1a1a2e;

Using rgba() or transparent in gradients allows lower layers to show through.

Using the CSS gradient generator

Writing gradient syntax manually is tedious, especially for multi-stop or angled gradients. The free CSS gradient generator lets you:

• Pick colors visually with a color picker
• Add and position multiple color stops by dragging
• Choose gradient type (linear, radial, conic)
• Adjust angle and position interactively
• Copy the generated CSS code directly

The generated code works in all modern browsers without vendor prefixes — -webkit-linear-gradient prefix support is no longer needed for any browser in active support as of 2026.

Gradient color strategies

A few gradient patterns that work reliably in UI design:

• Monochromatic: Two shades of the same hue — safe, always cohesive. Example: linear-gradient(#3b82f6, #1d4ed8).
• Analogous: Colors adjacent on the color wheel — natural, pleasing. Blue → teal, pink → orange.
• Semi-transparent overlay: A gradient from a brand color to transparent over a photo background. Ensures text readability while showing the image.
• Subtle background: Near-white to white gradient. Adds depth without visible color — linear-gradient(135deg, #f8fafc, #ffffff).

Avoid complementary color gradients (directly opposite on the color wheel — red to green, blue to orange) — the transition passes through grey in the middle and looks muddy.

Related tools

• Free CSS Gradient Generator — visual gradient builder with copy-paste CSS output
• Free Color Picker — pick and convert colors to HEX, RGB, and HSL
• Color Contrast Checker — verify your gradient meets WCAG accessibility requirements

Written by Achraf A., founder of TheFreeAITools.