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%);

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.