CSS Gradient Generator

CSS gradients let you create smooth colour transitions without images. They're resolution-independent, fast to render, and fully controllable through code. This tool helps you build them visually and generates production-ready CSS.

Linear Gradients

A linear gradient transitions between colours along a straight line. You control the direction (using keywords like to right or angles like 135deg) and the colour stops.

background: linear-gradient(to right, #6366F1, #EC4899);

Radial Gradients

A radial gradient radiates outward from a centre point. You can create circular or elliptical shapes, and control where the gradient starts.

background: radial-gradient(circle, #6366F1, #EC4899);

Multiple Colour Stops

Gradients aren't limited to two colours. Add as many stops as you need to create complex transitions. Each stop can include an optional position percentage.

background: linear-gradient(to right, #667eea 0%, #764ba2 50%, #f093fb 100%);

Conic Gradients

A conic gradient sweeps colours around a centre point, like a colour wheel or pie chart. The transition follows the circumference of a circle rather than a straight line or radiating outward.

background: conic-gradient(from 45deg, #667eea, #764ba2, #667eea);

Conic gradients are particularly useful for creating pie charts, colour wheels, loading spinners, and starburst patterns using pure CSS — no images or JavaScript needed. The from keyword sets the starting angle, and you can use repeating-conic-gradient for pinwheel effects.

Text Gradients

CSS can apply gradients directly to text rather than backgrounds. This technique uses background-clip: text to clip a gradient to the shape of the text, creating eye-catching headings and brand elements.

.gradient-text {
  background: linear-gradient(135deg, #667eea, #764ba2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

Text gradients are widely used on modern landing pages, particularly for hero headings and call-to-action elements. The -webkit- prefixed properties are still needed for Safari and Chrome compatibility, though the unprefixed background-clip: text is supported in all modern browsers.

Browser Support

CSS gradients are supported in all modern browsers including Chrome, Firefox, Safari, Edge, and Opera. No vendor prefixes are needed for current browser versions.