CSS Gradient Generator

Create linear and radial CSS gradients visually and copy the code, with a live preview.

Designers and developers building gradient backgrounds for websites and apps.

How to use it

  1. Choose gradient type

    Switch between a linear or radial gradient.

  2. Pick your colours

    Select the start and end colours with the colour pickers.

  3. Adjust and copy

    For linear gradients, drag the angle slider, then copy the generated CSS.

Why use this tool?

Hand-writing CSS gradient syntax is fiddly and hard to visualise. This generator lets you pick colours and an angle and see the result live, then copy production-ready CSS that works across modern browsers.

Common use cases

Website backgrounds

Create eye-catching hero and section backgrounds.

Buttons & cards

Add subtle gradient fills to UI components.

Design prototyping

Quickly try colour combinations before committing in your stylesheet.

Frequently asked questions

Does the CSS work in all browsers?

Yes. Standard linear-gradient and radial-gradient are supported in all modern browsers.

Can I use more than two colours?

This version uses two colours; you can add more stops manually in the copied CSS.

Is it free?

Yes, and nothing leaves your browser.

Related tools