CSS Gradient Generator

What this tool does

Build a linear, radial or conic CSS gradient from color stops, for a background or for text, and copy the CSS or a ready HTML snippet. Use it when a section, button or heading needs a gradient and you want the code written for you. You need two to eight stops, and positions round to whole percents.

How to use

1. Choose Background or Text, then linear, radial or conic.
2. Set the angle for linear and conic, or the shape and center for radial. Conic also has a center.
3. Set colors and positions for each stop, or start from a preset.
4. For text, type the words and pick size, weight, font and alignment.
5. Copy the CSS or the HTML snippet, with a CSS class or inline styles.

Examples

• A simple linear fill

  background: linear-gradient(90deg, #336699 0%, #ffffff 100%);

• A radial fill

  background: radial-gradient(circle, #336699 0%, #ffffff 100%);

• A conic color wheel

  background: conic-gradient(from 0deg, #ff6b6b 0%, #feca57 25%, #48dbfb 50%, #ff9ff3 75%, #ff6b6b 100%);

How it works

Stops are sorted by position and written as valid CSS color stops. Gradient text uses background-clip: text inside an @supports rule, with the first stop as a solid color fallback, so older browsers still show readable text. Text you type is escaped in the HTML snippet and is not added to share links.

Limitations

Two to eight color stops are supported. Positions are rounded to whole percents from 0 to 100, and a color the parser cannot read stops the CSS until it is fixed. Radial gradients have no angle in CSS, so they use a shape and center instead. Repeating gradients, layered gradients, and a gradient you paste in are not generated.

See the disclaimer for what these tools do not cover.

FAQ

Is the CSS Gradient Generator free?

Yes. Building linear, radial or conic gradients and gradient text is free, runs in your browser, and needs no account.

How does the gradient text work?

The CSS paints the gradient as the text background and clips it to the letters with background-clip: text. Browsers that cannot clip show the first stop as a solid text color instead.

Should I copy the CSS or the HTML?

Copy the CSS to add it to your stylesheet. Copy the HTML for a quick snippet, either with a class and a style block or with inline styles.

Why is there no angle for radial gradients?

CSS radial gradients spread out from a center and have no direction. You set the shape (circle or ellipse) and the center point instead. Linear and conic gradients use an angle.

What does the share link keep?

The link keeps the gradient type, angle, center, stops, mode and text settings. The words you type for gradient text stay on your page and are not put in the link.

Will older browsers understand the CSS?

The copy is standard CSS without vendor prefixes, except -webkit-background-clip for text, which some browsers still need. Conic gradients need a browser from 2020 or later.

Related tools

Helpful guides