CSS Gradient Generator

Build a linear or radial CSS gradient visually — pick your colors and angle, preview it live, and copy the ready-to-use CSS rule.

Type

Angle: 90°

Color 1

Color 2

background: linear-gradient(90deg, #6366f1, #ec4899);

How was this tool?

Your feedback helps us improve CSS Gradient Generator.

Why use CSS Gradient Generator?

Writing gradient CSS by hand means guessing at angles and color stops, then reloading the browser repeatedly to see if it looks right. This tool flips that around: adjust the angle, colors, and type visually, see the result immediately, and copy the exact CSS once it looks right — no trial and error in a stylesheet.

Key benefits

Live visual preview, no guessing at values
Both linear and radial gradients
Copy-ready CSS output
Free, unlimited use

Features

Adjustable angle for linear gradients
Two-color stops with a live color picker
One-click copy of the full CSS rule

Popular use cases

Building a hero section or button background gradient
Prototyping a color transition before committing to a design
Quickly generating gradient CSS without writing it by hand

How to use CSS Gradient Generator

1
Pick a gradient type
Linear or radial.
2
Choose your colors and angle
Preview updates live.
3
Copy the CSS
One click, ready to paste into your stylesheet.

Frequently asked questions

What's the difference between linear and radial gradients?

A linear gradient transitions colors along a straight line at a chosen angle. A radial gradient transitions outward from a center point in a circular pattern.

Can I use more than two colors?

This tool generates a simple two-color gradient, the most common case. For multi-stop gradients, add additional comma-separated color stops directly to the generated CSS.

Does this work in all browsers?

Yes — linear-gradient() and radial-gradient() are supported in every modern browser without vendor prefixes.

Last reviewed: September 2026

How was this tool?

Related tools