How to Create a CSS Gradient Online — Free Generator (2026)

CSS gradients are one of the most impactful design techniques available to web developers — a two-line property that replaces a gradient image, saves an HTTP request, and scales perfectly to any screen size. Yet choosing the right type, getting the angle right, and knowing where to position each color stop requires real-time visual feedback that no static documentation or AI chat can provide.

This guide covers all three CSS gradient types, how to read and customise the generated code, and practical patterns you can drop straight into a project — with a free browser-based tool that lets you experiment in real time without touching a text editor.

The six CSS gradient functions

CSS defines three base gradient types. Each can be prefixed with repeating- to tile the pattern, giving six functions in total:

Linear, radial, and conic — how each works

Linear gradient

Colors transition along a straight line at a given angle. 0deg goes bottom to top; 90deg goes left to right; 45deg goes diagonally. The tool's angle slider gives you real-time visual feedback so you can dial in the exact direction without guessing.

/* 45° diagonal — left-bottom to right-top */
background: linear-gradient(45deg, #ff6b6b 0%, #4ecdc4 100%);

/* Top to bottom with a midpoint stop */
background: linear-gradient(180deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);

Radial gradient

Colors radiate outward from a central point. The tool exposes two radial-specific options: shape (circle or ellipse) and size (how far the gradient extends — closest-side, closest-corner, farthest-side, or farthest-corner). Farthest-corner (the browser default) fills the entire element; closest-side creates a tighter glow.

/* Circular spotlight effect */
background: radial-gradient(circle farthest-corner at center, #feca57 0%, #ff6b6b 100%);

/* Elliptical, clipped to nearest side */
background: radial-gradient(ellipse closest-side at center, #54a0ff 0%, #5f27cd 100%);

Conic gradient

Colors rotate around a center point — think of the hands of a clock sweeping through hues. This makes conic gradients uniquely suited for pie charts, color wheels, and spinner animations. The from angle sets where the gradient begins its sweep.

/* Three-segment pie: 33.3% each */
background: conic-gradient(from 0deg, #ff6b6b 0% 33%, #feca57 33% 66%, #54a0ff 66% 100%);

/* Smooth colour wheel */
background: conic-gradient(from 0deg, red, yellow, lime, cyan, blue, magenta, red);

Step-by-step: create a gradient in the tool

Color stops and positioning

Each color stop is a color value and an optional position. The position (expressed as a percentage of the gradient line) controls how abruptly or gradually the colors transition. Leave out positions and the browser spaces them evenly; set them explicitly to build precise bands and hard edges.

linear-gradient(90deg, red, yellow, blue)

linear-gradient(90deg, red 0%, yellow 20%, blue 100%)

linear-gradient(90deg, red 0% 50%, blue 50% 100%)

linear-gradient(90deg, red, 20%, blue)

Repeating gradients

Toggling "Repeating" in the tool prepends repeating- to whichever function is active. The browser tiles the color stops from the last stop back to the first, creating a seamless pattern. The key to useful repeating gradients is keeping the stops short — a 0%–20% band repeats five times across the element.

/* Diagonal candy stripes */
background: repeating-linear-gradient(
  45deg,
  #ff6b6b 0%,
  #ff6b6b 10%,
  #fff    10%,
  #fff    20%
);

/* Bullseye rings */
background: repeating-radial-gradient(
  circle at center,
  #4ecdc4 0%,
  #4ecdc4 10%,
  #fff    10%,
  #fff    20%
);

Practical use cases

Browser support

All three gradient types are fully supported in every modern browser — Chrome 26+, Firefox 16+, Safari 7+, and Edge 12+. Conic gradients were the last to ship, reaching baseline support in 2021 (Chrome 69, Safari 12.1, Firefox 83).

No vendor prefixes are needed for any of these functions in 2026. If you must support IE 11, linear and radial gradients require -webkit- and -ms- prefixes — conic gradients were never supported in IE.

Frequently asked questions