CSS Gradient Generator

CSS gradients are one of the most visually impactful tools in a web designer's toolkit. They replace what previously required image files with pure CSS — reducing HTTP requests, enabling infinite scalability at any resolution, and unlocking smooth animations and transitions. From subtle background washes to bold hero section graphics, gradients are used in virtually every modern web interface. Mastering gradient syntax opens up a vast range of design possibilities that were previously only achievable in Photoshop or Illustrator.

Linear Gradients

The linear-gradient() function creates a smooth transition between colours along a straight line. The first argument defines the direction — either as an angle in degrees (135deg), a keyword (to right, to bottom right), or omitted (defaults to to bottom). Subsequent arguments are colour stops — each defining a colour and optionally a position along the gradient line as a percentage or length. You can have any number of colour stops, enabling complex multi-colour gradients.

Common angle values: 0deg goes bottom to top, 90deg goes left to right, 180deg goes top to bottom, 135deg goes top-left to bottom-right (a popular diagonal). The diagonal 135deg gradient has become almost ubiquitous in modern UI design for buttons, hero backgrounds, and brand accent elements.

Radial Gradients

The radial-gradient() function radiates colours outward from a central point. The default shape is an ellipse that fits the element's bounding box, but you can specify circle for a perfectly circular gradient. The centre position can be customised with at followed by position keywords or coordinates: radial-gradient(circle at 30% 70%, #6366f1, #ec4899). Radial gradients are widely used for spotlight effects, glow backgrounds, and organic, light-source-inspired backgrounds.

Conic Gradients

The conic-gradient() function creates a gradient that rotates around a centre point rather than radiating from it. Unlike radial gradients which create concentric rings, conic gradients create pie-chart-like angular transitions. They are used for pie charts without SVG, colour wheels, and interesting circular decorative elements. conic-gradient(from 0deg, red, yellow, green, blue, red) creates a full colour wheel.

Hard Stop Gradients for Patterns

By placing two colour stops at the same position, you create a hard edge with no transition — an instant colour change. This technique enables pure CSS striped patterns: linear-gradient(45deg, #000 25%, transparent 25%, transparent 75%, #000 75%) combined with background-size creates a diagonal checker pattern. Hard-stop gradients eliminate the need for SVG or image files for many common repeating patterns.

Gradient Text

Applying a gradient to text requires a combination of three CSS properties: set background to your gradient, then -webkit-background-clip: text (and the unprefixed version), and finally -webkit-text-fill-color: transparent. This clips the gradient background to the text shape, producing gradient-filled text. Browser support is excellent across all modern browsers. This technique is widely used for headings and logo text to add visual interest without using image files.

Animated Gradients

CSS gradients cannot be directly animated with transition because they are background images, not colour values. The workaround is to animate background-position on a gradient that is larger than the element — typically 200–400% — creating the illusion of a shifting gradient. Alternatively, use CSS custom properties (variables) inside the gradient and animate the variable values with @property for true gradient animation in modern browsers.

Performance Considerations

CSS gradients are rendered by the browser's GPU compositor and are extremely performant compared to image backgrounds. They scale perfectly to any resolution and screen density, eliminate the need for separate @2x image assets for Retina displays, and add zero bytes to your image payload. The only performance consideration is gradient complexity — very large elements with complex multi-stop gradients on low-end mobile GPUs can occasionally cause paint performance issues, but this is rarely encountered in practice.