Building a hero or call-to-action section with a coloured background that transitions smoothly without a heavy image asset. Creating button or card hover states that feel polished — gradients are lighter and faster than background images. Mocking a brand-coloured overlay for text legibility (combine a gradient with low-opacity solid colour on top). Generating decorative dividers, mesh-style backgrounds, or SVG fills with layered colour stops. Prototyping animated gradient effects — copy the code and animate background-position on a background-size: 200% 200% setup. Exporting accessibility-friendly backgrounds where you control exact colour ratios at every point.

Pick gradient type. Choose linear (straight-line transition) or radial (centre-point spread). Linear defaults to 180° (top to bottom); radial spreads as a circle or ellipse. Add colour stops. Click to add stops along the gradient bar. Each stop has a colour (click to open a colour picker) and a position percentage. Drag stops left or right to adjust position; delete them by right-clicking. Adjust angles and shape. For linear, rotate the angle dial or type degrees directly (0° = vertical, 90° = horizontal). For radial, choose circle or ellipse and move the centre point. Preview in real time. The gradient updates in the preview box as you edit. The CSS code panel shows the exact linear-gradient(...) or radial-gradient(...) function. Copy and paste. Click the copy button to grab the CSS, then paste it into your background property. Works in all modern browsers.

Use background , not background-color . Gradients are images, not solid colours. If you set background-color alone, the gradient won't show. Stops must be in order. The tool sorts stops automatically, but if you copy the CSS and edit by hand, keep the percentages monotonic (increasing left to right). Out-of-order stops render unpredictably. Hard stops create sharp boundaries. If you place two stops at the exact same percentage, you get a sharp colour cut instead of a fade — useful for striped effects, but easy to create by accident. Banding on large areas. Long, low-contrast gradients can show visible colour bands on 8-bit displays. Fix this by adding a subtle SVG noise filter, or nudge stops 1–2% apart to break the pattern. Animating gradients is expensive. Animating background-image triggers a paint on every frame. Instead, use a larger background-size and animate background-position , or layer the gradient on a pseudo-element and transform that.

CSS Gradient Generator

Build linear and radial CSS gradients visually. Edit color stops, copy ready-to-paste CSS.

Type

Angle 90°

Color stops

Preview

CSS

What is this for?

CSS gradients let you draw smooth colour transitions across any background element without needing image files. The syntax is powerful but tedious to write by hand — angles, percentage stops, repeating patterns, and layering linear with radial gradients all require precision. This tool gives you a visual editor that updates the CSS in real time, so you can drag colour stops into place, adjust angles and shapes, and copy production-ready code in one click.

When to use it

Building a hero or call-to-action section with a coloured background that transitions smoothly without a heavy image asset.
Creating button or card hover states that feel polished — gradients are lighter and faster than background images.
Mocking a brand-coloured overlay for text legibility (combine a gradient with low-opacity solid colour on top).
Generating decorative dividers, mesh-style backgrounds, or SVG fills with layered colour stops.
Prototyping animated gradient effects — copy the code and animate background-position on a background-size: 200% 200% setup.
Exporting accessibility-friendly backgrounds where you control exact colour ratios at every point.

How it works

Pick gradient type. Choose linear (straight-line transition) or radial (centre-point spread). Linear defaults to 180° (top to bottom); radial spreads as a circle or ellipse.
Add colour stops. Click to add stops along the gradient bar. Each stop has a colour (click to open a colour picker) and a position percentage. Drag stops left or right to adjust position; delete them by right-clicking.
Adjust angles and shape. For linear, rotate the angle dial or type degrees directly (0° = vertical, 90° = horizontal). For radial, choose circle or ellipse and move the centre point.
Preview in real time. The gradient updates in the preview box as you edit. The CSS code panel shows the exact linear-gradient(...) or radial-gradient(...) function.
Copy and paste. Click the copy button to grab the CSS, then paste it into your background property. Works in all modern browsers.

Common gotchas

Use background, not background-color. Gradients are images, not solid colours. If you set background-color alone, the gradient won't show.
Stops must be in order. The tool sorts stops automatically, but if you copy the CSS and edit by hand, keep the percentages monotonic (increasing left to right). Out-of-order stops render unpredictably.
Hard stops create sharp boundaries. If you place two stops at the exact same percentage, you get a sharp colour cut instead of a fade — useful for striped effects, but easy to create by accident.
Banding on large areas. Long, low-contrast gradients can show visible colour bands on 8-bit displays. Fix this by adding a subtle SVG noise filter, or nudge stops 1–2% apart to break the pattern.
Animating gradients is expensive. Animating background-image triggers a paint on every frame. Instead, use a larger background-size and animate background-position, or layer the gradient on a pseudo-element and transform that.

Tips for accessibility

If text sits on a gradient, test contrast against the darkest and lightest points where the text appears, not the average. Use a contrast checker tool and aim for WCAG AA (4.5:1 for body text). Consider adding a semi-opaque solid overlay on top of the gradient to raise contrast uniformly.