ToolWox
Log inSign up

CSS Gradient Generator

CSS Gradient Generator lets you build linear and radial gradients visually, with as many color stops as you like, and copy the ready-to-paste CSS. A live preview shows exactly what you will get.

Drag the angle and stop positions, pick colors, and grab the background declaration for your stylesheet.

background: linear-gradient(90deg, #7c3aed 0%, #06b6d4 100%);

How to use CSS Gradient Generator

  1. 1

    Choose a gradient type

    Switch between linear and radial. Linear gradients also let you set an angle.

  2. 2

    Add and adjust color stops

    Pick a color and position for each stop, and add more stops for richer blends.

  3. 3

    Copy the CSS

    Copy the generated background declaration straight into your stylesheet.

Linear vs radial gradients

A linear gradient blends colors along a straight line, controlled by an angle — 90deg runs left to right, 0deg bottom to top. It is the workhorse for buttons, headers and section backgrounds.

A radial gradient blends outward from a center point in a circle or ellipse, which is great for spotlights, glows and soft vignettes. Both are generated here with the same color stops.

Working with color stops

Each color stop has a color and a position from 0% to 100%. Two stops give a simple blend; adding more lets you create multi-color gradients and sharp transitions by placing stops close together.

The generated code uses standard CSS gradient functions, so it works in every modern browser with no prefixes required.

Frequently asked questions

Can I add more than two colors?
Yes. Add as many color stops as you need and position each one along the gradient.
Does the generated CSS need vendor prefixes?
No. linear-gradient and radial-gradient are supported in all modern browsers without prefixes.
Can I make a radial gradient?
Yes. Switch the type to radial and the same color stops render as a circular gradient.

Last updated: