How do I make a CSS gradient?

Pick the type, set the direction, then give each colour stop a colour and a position along the line. A linear gradient takes an angle in degrees, where 0 paints upwards and 90 paints to the right; a radial gradient takes a shape and a centre point; a conic gradient takes the angle it starts sweeping from. The preview repaints as you type, and the declaration under it is a single background line, shown wrapped or on one line, ready to paste into a stylesheet.

How do I get a hard edge instead of a blend?

Give two neighbouring stops the same position. A gradient blends between stops, so when one ends at 50% and the next begins at 50% there is no distance to blend over and the colour changes in a clean line. This tool keeps stops that share a position and names the pair underneath rather than nudging one of them aside, and the Hard stripe starter is exactly that: four stops, two of them sharing 50%, making a clean two colour split.

Can a gradient fade to transparent?

Yes, and alpha is carried through every notation here. Write a stop as rgba(22, 25, 27, 0), as an eight digit hex such as #16191B00, or as the keyword transparent, and it stays see-through when you switch the output between hex, rgb and hsl. The checkerboard behind the swatch is there so you can see which part of the gradient is transparent; it is a separate layer and it is not in the CSS you copy.

What is the difference between linear, radial and conic gradients?

A linear gradient runs the colours along a straight line at the angle you give it. A radial gradient spreads them out from a centre point as a circle or an ellipse. A conic gradient sweeps them around that point like the hand of a clock, which is what makes pie charts and colour wheels. The three cases under the tool show your current stops written as all three, so you can copy whichever one paints what you had in mind.

Does the output need browser prefixes?

The tool writes unprefixed linear-gradient(), radial-gradient() and conic-gradient() syntax for current browsers. It does not generate legacy prefixed forms.

Why did a stop I placed at 20% end up somewhere else?

Because CSS does not allow a stop to sit behind the one before it. If stop 2 is at 80% and stop 3 is at 20%, the browser lifts stop 3 to 80%, which usually looks like the stop vanished. The tool says so in a line under the stage instead of letting you discover it later, and the Sort by position button puts the stops in the order the browser will read them so the preview and your intention match again.

What colour values can I type?

Hex in 3, 4, 6 or 8 digits, rgb() and rgba() in the comma form or the space and slash form, hsl() and hsla() the same way, the sixteen basic CSS colour names such as teal and navy, with grey accepted alongside gray, and transparent. Anything else is refused by the stop it is on, with the reason, so a typo shows up as a message naming stop 3 rather than as a gradient that silently stops halfway.

Can I use this free browser tool without installing software?

Yes. Build and copy gradients directly in your browser without an account or installation. The controls remember your gradient in this browser; Start over above the tool clears it.

Can I use the gradient on an HTML element or button?

Yes. Copy CSS and paste the background declaration into the CSS rule for your element or button. The background-image variants use the same gradient function as a CSS image. The tool does not generate text clipping, border, animation or Tailwind utility declarations.

CSS Gradient Generator

Choose a linear, radial or conic gradient, adjust its direction and colour stops, then copy the CSS used by the live preview. Add up to twelve stops, use transparency, or give neighbouring stops the same position for a hard stripe. The three examples below the controls reuse your colours in each gradient type.

previewlinear 135deg

3 stops 0% 45% 100%

css

background: linear-gradient(
  135deg,
  #0B7A85 0%,
  #5FBFC9 45%,
  #E08573 100%
);

Type

Angle

Stops: 3

Format

Colour stops

Stop 1

Stop 2

Stop 3

Start from

Linear, 135deg3 stops, the gradient above
linear-gradient(135deg, #0B7A85 0%, #5FBFC9 45%, #E08573 100%)
Radial, circle at center3 stops, the same colours
radial-gradient(circle at center, #0B7A85 0%, #5FBFC9 45%, #E08573 100%)
Conic, from 135deg3 stops, the same colours
conic-gradient(from 135deg at center, #0B7A85 0%, #5FBFC9 45%, #E08573 100%)

The swatch on the stage is painted with the declaration in the css pane: the one line view is that string character for character, and the wrapped view is the same string with line breaks added.

Up to 12 stops, positions from 0% to 100%, and colours as hex, rgb(), hsl() or a basic colour name. Alpha is carried through every notation, so a stop can fade to transparent. Switching the notation rewrites the stops in it and leaves anything unreadable exactly as you typed it. The gradient is kept in this browser alone; Start over, above the tool, forgets it.

Accuracy. The CSS shown is exactly what the preview paints, so what you copy is what you saw. It writes the standard gradient syntax that current browsers use, with no vendor prefixes. Wrapping the declaration over lines only adds whitespace, which CSS ignores. The checkerboard behind the swatch is a separate layer that shows where a stop is see-through: it is not part of the gradient and not in the CSS.

Common questions

How do I make a CSS gradient?: Pick the type, set the direction, then give each colour stop a colour and a position along the line. A linear gradient takes an angle in degrees, where 0 paints upwards and 90 paints to the right; a radial gradient takes a shape and a centre point; a conic gradient takes the angle it starts sweeping from. The preview repaints as you type, and the declaration under it is a single background line, shown wrapped or on one line, ready to paste into a stylesheet.
How do I get a hard edge instead of a blend?: Give two neighbouring stops the same position. A gradient blends between stops, so when one ends at 50% and the next begins at 50% there is no distance to blend over and the colour changes in a clean line. This tool keeps stops that share a position and names the pair underneath rather than nudging one of them aside, and the Hard stripe starter is exactly that: four stops, two of them sharing 50%, making a clean two colour split.
Can a gradient fade to transparent?: Yes, and alpha is carried through every notation here. Write a stop as rgba(22, 25, 27, 0), as an eight digit hex such as #16191B00, or as the keyword transparent, and it stays see-through when you switch the output between hex, rgb and hsl. The checkerboard behind the swatch is there so you can see which part of the gradient is transparent; it is a separate layer and it is not in the CSS you copy.
What is the difference between linear, radial and conic gradients?: A linear gradient runs the colours along a straight line at the angle you give it. A radial gradient spreads them out from a centre point as a circle or an ellipse. A conic gradient sweeps them around that point like the hand of a clock, which is what makes pie charts and colour wheels. The three cases under the tool show your current stops written as all three, so you can copy whichever one paints what you had in mind.
Does the output need browser prefixes?: The tool writes unprefixed linear-gradient(), radial-gradient() and conic-gradient() syntax for current browsers. It does not generate legacy prefixed forms.
Why did a stop I placed at 20% end up somewhere else?: Because CSS does not allow a stop to sit behind the one before it. If stop 2 is at 80% and stop 3 is at 20%, the browser lifts stop 3 to 80%, which usually looks like the stop vanished. The tool says so in a line under the stage instead of letting you discover it later, and the Sort by position button puts the stops in the order the browser will read them so the preview and your intention match again.
What colour values can I type?: Hex in 3, 4, 6 or 8 digits, rgb() and rgba() in the comma form or the space and slash form, hsl() and hsla() the same way, the sixteen basic CSS colour names such as teal and navy, with grey accepted alongside gray, and transparent. Anything else is refused by the stop it is on, with the reason, so a typo shows up as a message naming stop 3 rather than as a gradient that silently stops halfway.
Can I use this free browser tool without installing software?: Yes. Build and copy gradients directly in your browser without an account or installation. The controls remember your gradient in this browser; Start over above the tool clears it.
Can I use the gradient on an HTML element or button?: Yes. Copy CSS and paste the background declaration into the CSS rule for your element or button. The background-image variants use the same gradient function as a CSS image. The tool does not generate text clipping, border, animation or Tailwind utility declarations.

The CSS shown is exactly what the preview paints, so what you copy is what you saw. It writes the standard gradient syntax that current browsers use, with no vendor prefixes.