CSS Gradients Explained: Linear, Radial and Conic

Gradients are everywhere in modern web design: soft hero backgrounds, glowing buttons, colourful app icons. In CSS they are not images at all but generated by the browser from a short line of code, which means they scale to any size, load instantly and are easy to change. Once you understand the three gradient functions and how colour stops work, you can read and tweak any gradient you find. This guide walks through each type with examples you can paste straight into a stylesheet.

Gradients Are Images Made of Code

In CSS, a gradient is a type of image. That is why you use it with background-image (or the background shorthand) rather than background-color:

background-image: linear-gradient(157deg, #3BA5DE, #BE1FEA);

Because the browser draws it, a gradient stays sharp on any screen and adds no file to download. You can also layer several gradients, separated by commas, or place a gradient over a photo to improve text contrast.

Linear Gradients: Colour Along a Line

A linear-gradient() blends colours along a straight line. The first argument sets the direction, either as an angle or as keywords:

• 0deg points up, 90deg points right, 180deg points down.
• Keywords such as to right or to bottom left describe the direction in words.
• If you leave the direction out, the gradient runs from top to bottom.

Colour stops can include positions: linear-gradient(90deg, #3BA5DE 0%, #BE1FEA 70%) finishes the blend at 70% and keeps the second colour solid after that. Placing two stops at the same position creates a hard edge, which is how designers make stripes.

Radial and Conic Gradients

A radial-gradient() spreads colour outward from a centre point. By default it forms an ellipse that fits the element; write radial-gradient(circle, …) for a perfect circle, or move the centre with at top left. Radial gradients are great for spotlights, glows and vignettes.

A conic-gradient() sweeps colour around a centre, like the hands of a clock. Optional settings such as from 45deg rotate the starting point. Conic gradients make colour wheels, pie-chart effects and shimmering metallic surfaces. They are supported in current versions of the major browsers.

Using the Gradient Generator to Explore

Reading about gradients is useful; seeing dozens of them is faster. The tool on this page creates valid CSS values with a live preview:

1. Choose the Type: Linear, Radial or Conic.
2. Set Colors to two for smooth, minimal blends or three for richer transitions.
3. Use How many? to generate from 1 to 40 gradients — eight is the default.
4. Click a gradient you like to copy its value, or copy all values at once.
5. Paste it after background-image: in your CSS, then adjust the angle or a colour stop by hand.
6. Export a batch as CSV, JSON or TXT to keep a mood board for your design system.

Keeping Text Readable on Gradients

A beautiful gradient can make text hard to read, because the contrast changes across the background. Some practical safeguards:

• Check the contrast of your text against the lightest and darkest parts of the gradient, not just the middle.
• Use a semi-transparent dark or light overlay behind long text.
• Keep the busiest colour changes away from headings and buttons.
• Set a solid background-color as a fallback, so the text is still readable if the gradient fails to render.

For blends between two very different hues, adding a third colour in between can avoid a muddy grey middle zone.

Performance and Design-System Habits

Gradients are lightweight compared with image files, but a few habits keep them tidy in larger projects. Store each approved gradient once as a custom property, such as --gradient-hero, and reference it everywhere instead of copying the full value. Limit very large, complex gradients on elements that animate or scroll constantly, and test on older phones if your audience uses them. Finally, give each gradient a short descriptive name in your documentation — “sunrise” or “ocean” — so designers and developers talk about the same thing.

Pro tips

• Use subtle angles like 135deg for a natural, light-from-the-corner feel.
• Store favourite gradients as CSS custom properties for easy reuse.
• Combine a gradient with a background photo using a comma-separated list.
• Test gradients in dark mode as well as light mode.

Frequently asked questions