CSS Gradient Generator

Pick colors, angle, and gradient type on a live preview to design a linear or radial CSS gradient, then copy the exact background-image CSS code — no guessing at color stop percentages.

Design & CSS Tools Runs entirely in your browser

All processing happens on your device — nothing is sent to a server.

Angle90°

100%

CSS code

background-image: linear-gradient(90deg, #6366f1 0%, #ec4899 100%);

What this tool does

Builds a linear or radial gradient from colours you add at an angle you set, giving you ready CSS with a live preview.

When to use it

A page section background you want graduated.
A button or card with a gradient.
Trying colour combinations before committing to one.
Needing gradient code without writing it by hand.

How to use it

Choose "Linear" or "Radial".
Set the "Angle" for a linear gradient.
Add colours with "Add color" and remove any you do not want.
Copy the "CSS code".

A practical example

Input

A two-colour linear gradient at a diagonal angle.

Output

The gradient's CSS with a preview showing it before you copy.

Limitations

Gradients with many colours can show visible banding on displays with limited colour depth.
Text over a gradient has a contrast that changes with position; check it with the Colour Contrast Checker at both the lightest and darkest points.
This generates the gradient and does not suggest harmonious colour combinations — use the Colour Palette Harmony Generator for that.