---
title: "CSS Gradient Generator: Linear & Radial"
description: "Free CSS gradient generator. Build linear and radial gradients visually, add unlimited color stops, choose from presets, and copy production-ready CSS."
url: https://frontendhelpers.com/css-gradient-generator
updated: 2026-10-12
---

# CSS gradient generator

Build linear and radial CSS gradients visually, with live preview and unlimited colour stops. Copy the CSS and paste it straight into your stylesheet.

## How to use this tool

A gradient rendered by the browser costs you nothing in network weight. There is no file to download, no extra HTTP request, and no cache to invalidate — the entire effect travels as a line of CSS inside a stylesheet you were already loading.

They are also resolution-independent. A gradient image has to be exported at multiple sizes and still risks visible banding or blurring on high-density displays; a CSS gradient is recalculated by the GPU at whatever size and pixel density the device happens to have, so it is always crisp. And because it is just CSS, you can change it in a second — swap a colour, adjust the angle, or drive the whole thing from custom properties for theming.

## Linear vs radial: choosing the right type

**Linear gradients** flow along a straight line at whatever angle you specify. They are the workhorse: hero backgrounds, buttons, card overlays, and subtle top-to-bottom shading that adds depth without drawing attention. The angle is measured clockwise from pointing up, so `0deg` runs bottom-to-top, `90deg` runs left-to-right, and `135deg` — the most common choice for a diagonal — runs from top-left to bottom-right.

**Radial gradients** radiate outward from a point. They are ideal for spotlight effects, soft glows behind a focal element, and giving a flat surface a subtle sense of light direction. Used large and low-contrast, a radial gradient reads as atmosphere rather than decoration.

## Colour stops, and how to avoid muddy gradients

Each colour stop is a colour plus a position along the gradient. Two stops give you a simple blend; adding more lets you build complex, multi-hue transitions. The usual mistake is choosing two colours that sit opposite each other on the colour wheel — blending blue directly into orange passes through a grey, muddy middle, because the interpolation runs straight through the desaturated centre of the colour space.

The fix is to keep your stops closer together in hue, or to add an intermediate stop that steers the blend around the wheel rather than through it. Gradients between neighbouring hues — blue to purple, orange to pink, teal to green — look rich almost automatically. Our [colour palette generator](https://frontendhelpers.com/color-palette-generator) can produce harmonious analogous colours to use as stops.

## Performance and accessibility notes

Static gradients cost nothing to download and little to render. Animated ones are not free: whether you animate `background-position` across an oversized gradient or a registered custom property inside it, the browser repaints the element on every frame. That is fine for small elements; for large areas, animate the `transform` of a pseudo-element that carries the gradient instead, as described below.

One accessibility caveat: text placed over a gradient has a contrast ratio that changes across the gradient. Check the text against the _lightest_ and the _darkest_ point it crosses, not just the average, using the [contrast checker](https://frontendhelpers.com/contrast-checker). If it fails at either end, add a semi-transparent scrim between the gradient and the text.

## Animating gradients with @property

A gradient is an image, and browsers do not interpolate between two `background-image` values: transition from one gradient to another and it simply snaps at the halfway point. The way round it is to animate a value _inside_ the gradient. Register a custom property with `@property` so the browser knows it holds an angle, colour or percentage, use it in the gradient, and animate the property. Skip the registration and the browser treats the custom property as an opaque string, and you are back to the snap.

```css
@property --angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 135deg;
}

.hero {
  background: linear-gradient(var(--angle), #4f46e5, #db2777);
  animation: turn-gradient 12s linear infinite;
}

/* 135deg → 495deg is one full turn */
@keyframes turn-gradient {
  to { --angle: 495deg; }
}

@media (prefers-reduced-motion: reduce) {
  .hero { animation: none; }
}
```

Registered custom properties have been Baseline in Chrome, Edge, Firefox and Safari since July 2024. Be honest about the cost, though. Every frame produces a new image, so the browser repaints the element, exactly as it does when you animate `background-position` across an oversized gradient (a technique often wrongly described as cheap). On a button or a badge that is negligible; on a full-viewport hero on a mid-range phone it can eat real frame time, so check the Performance panel. If it does, put the gradient on an oversized `::before` pseudo-element and animate its `transform` with a slow rotate or translate instead. Transform and opacity changes can be handled by the compositor without repainting.

Further reading: [@property on MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@property), and web.dev's [note on @property reaching Baseline](https://web.dev/blog/at-property-baseline).

## Frequently asked questions

### How do I make a diagonal CSS gradient?

Set the angle to 135deg for a top-left to bottom-right diagonal, or 45deg for bottom-left to top-right. Angles are measured clockwise from pointing straight up, so 0deg is bottom-to-top and 90deg is left-to-right.

### Can I use more than two colours in a CSS gradient?

Yes — a gradient accepts unlimited colour stops. Add as many as you need and set each one’s position along the gradient. Keep neighbouring stops close in hue to avoid a muddy grey band in the middle of the blend.

### Do CSS gradients hurt page performance?

Static gradients do not: they have no network cost and replace image files entirely. Animated gradients repaint on every frame, whether you animate background-position or a registered @property angle, so keep them to small elements or animate the transform of a pseudo-element that carries the gradient.

### How do I add a gradient to text?

Apply the gradient as a background, then clip it to the text with background-clip: text and set the text colour to transparent. Include the -webkit- prefixed versions for full browser support.

## Related tools

- [Colour Palette Generator](https://frontendhelpers.com/color-palette-generator): Turn one brand colour into a full tint and shade scale with CSS tokens.
 
- [Colour Converter](https://frontendhelpers.com/color-converter): Get any stop in hex, RGB, HSL or OKLCH for smoother gradients.
 
- [WCAG Contrast Checker](https://frontendhelpers.com/contrast-checker): Check text over your gradient passes AA and AAA at both ends.

---

This page is a free interactive tool. Use it in your browser at https://frontendhelpers.com/css-gradient-generator