CSS Gradients: Complete Guide with Types, Examples and a Free Generator

CSS gradients let you create smooth transitions between two or more colours without using image files. They are resolution-independent, load instantly, and can be animated — making them far superior to gradient images for most web design uses. Here is everything you need to create any gradient type in CSS.

The three gradient types

CSS has three gradient functions: linear-gradient(), radial-gradient(), and conic-gradient(). Each produces a different shape of transition.

Linear gradient

A linear gradient transitions colours along a straight line. The direction can be specified as an angle or a keyword:

• to right — left to right
• to bottom — top to bottom (default)
• to bottom right — diagonal
• 45deg, 135deg — specific angle in degrees

Angles work clockwise from the top: 0deg goes upward, 90deg goes right, 180deg goes downward.

Radial gradient

A radial gradient transitions colours outward from a centre point in a circular or elliptical pattern:

Key parameters:

• circle — produces a perfect circle
• ellipse — (default) stretches to fit the element shape
• at top left, at 30% 70% — positions the centre point
• closest-side, farthest-corner — determines where the gradient ends

Conic gradient

A conic gradient rotates colours around a centre point, like a colour wheel:

Conic gradients are newer (Safari support from 2020, Chrome from 2018) and are excellent for pie charts, progress indicators, and colour wheels.

Color stops

All gradient types accept multiple colour stops — the points where one colour transitions to the next:

The percentage after each colour is its position along the gradient axis. You can add as many stops as you want. Omitting positions lets the browser distribute them evenly.

Hard stops (no transition)

Place two stops at the same position to create a hard edge with no blending:

This creates a clean split between two colours — useful for striped patterns.

Repeating gradients

Prefix any gradient with repeating- to tile it:

This creates diagonal stripes. The pattern repeats every 20px (the sum of the stripe and gap).

Multiple gradients

You can layer multiple gradients by separating them with commas:

The first value is on top. Using rgba() or transparent lets lower layers show through.

Browser compatibility

All three gradient types work in every modern browser without vendor prefixes. For very old browsers (IE 9 and below), gradients require the -ms- prefix — but at 2026 traffic levels this is not a concern for the vast majority of projects.

Performance

CSS gradients are painted by the GPU and have essentially zero performance cost. They are far more efficient than loading gradient images. The one exception: extremely complex multi-stop gradients with many transparent layers may cause paint performance issues on mobile — test at 60fps if you are using many stacked transparent gradients.

Frequently asked questions

Can I use CSS gradients as borders?

Not directly with border-color — CSS borders do not accept gradients. The most reliable approach is to use a wrapper element with a gradient background and a smaller inner element with a solid background, creating the appearance of a gradient border.

How do I animate a CSS gradient?

CSS currently cannot animate gradient properties directly with transitions. The standard workaround is to animate background-position on a gradient that is larger than the element, or to animate opacity between two overlapping gradient layers using a pseudo-element.

What is the difference between a gradient and a mesh gradient?

CSS gradients blend colours along a mathematical function (line, circle, cone). Mesh gradients (popular in design tools like Figma) blend colours on a two-dimensional grid, producing complex organic-looking colour fields. CSS does not natively support mesh gradients — they must be rasterised to a PNG or SVG.