Can I add more than two colors?

Yes, you can add multiple color stops and adjust each stop's position along the gradient.

Home/Developer/CSS Gradient Generator

DeveloperReady to use

CSS Gradient Generator

Build linear and radial CSS gradients visually and copy the generated background or text gradient code.

Documentation

Interactive workspace

No account required

CSS Gradient Generator

Angle90°

100%

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

What is CSS Gradient Generator?

Build linear and radial CSS gradients visually and copy the generated background or text gradient code.

How it works

SiteIndex builds a linear or radial gradient string from your chosen colors, stops, and angle, previews it live, and lets you copy it as a background or a text gradient.

Where a network request is required, SiteIndex validates public HTTP/HTTPS targets before making the request.

Common uses

Design a background gradient for a hero section or button.
Create a gradient text effect for a heading.
Fine-tune gradient angle and color stops before copying CSS.

Limitations

Results depend on the browser, network, input, and external service involved.
This tool is informational and does not replace specialist diagnostics or professional advice.

FAQ

Can I add more than two colors?: Yes, you can add multiple color stops and adjust each stop's position along the gradient.

Related tools

Border Radius Generator

Developer