CSS Gradient Generator

CSS gradient angles and directions

The angle in a linear gradient is the direction the colors travel. 0deg points up, and the angle turns clockwise from there. If you leave the angle out, the gradient runs from top to bottom. You can also write a direction as a keyword:

Corner keywords like to top right aim at the corner of the box, so on a wide box they are not the same as45deg. Under Write the direction as, pick Degrees for a direction that stays the same on any box shape, or Keyword when the gradient should always run corner to corner.

Common CSS gradient problems and how to fix them

html {
  min-height: 100%;
}

.split {
  background: linear-gradient(
    90deg,
    #6366f1 50%,
    #f59e0b 50%
  );
}

h1 {
  background: linear-gradient(90deg, #6366f1 0%, #f59e0b 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.button {
  background: linear-gradient(90deg, #6366f1, #ec4899, #f59e0b);
  background-size: 200% 100%;
  transition: background-position 0.4s ease;
}

.button:hover {
  background-position: 100% 0;
}

Who uses a CSS gradient generator

• ·Web developers. Build page backgrounds, hero sections, buttons, and image overlays without an image file.
• ·Designers. Turn a gradient from a mockup into code by matching its colors, angle, and stop positions.
• ·Tailwind CSS users. Get gradient classes with any angle, or a single class when you need more than three colors.
• ·People learning CSS. See how each setting changes the gradient syntax, line by line.

Related color and CSS tools

• Random Color GeneratorGet random HEX, RGB, and HSL colors and lock the ones you like
• HEX to RGB ConverterConvert HEX color codes to RGB and RGB back to HEX
• RGB to HEX ConverterConvert RGB, RGBA, and 0 to 1 color values to HEX codes

Frequently asked questions

How do I make a CSS gradient?

Pick Linear, Radial, or Conic, then set your colors on the color bar. Change the angle or center point until the preview looks right, then click Copy CSS and paste the line into your stylesheet. It sets the background property, so it works on any element.

How do I add or remove colors in a gradient?

Click anywhere on the color bar to add a color at that spot. The new color matches the gradient at that point, so the look does not jump. To remove a color, select its handle and click Remove, or press Delete. A gradient needs at least two colors.

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

A linear gradient blends colors along a straight line, like from left to right. A radial gradient spreads colors out from a center point in rings. A conic gradient sweeps colors around a center point, like the hands of a clock.

How do I make a gradient that fades to transparent?

Select the stop you want to fade and drag its Opacity slider down to 0%. The CSS writes that stop as rgba() with an alpha of 0. A dark color fading to transparent is a common way to make text readable on top of a photo.

Why is the middle of my gradient gray or muddy?

By default, browsers mix gradient colors in the sRGB color space. Halfway between opposite colors, like blue and yellow, that mix lands on gray. Set Color blending to Smooth (OKLab) to keep the middle bright, or add a third color in the middle yourself.

Does OKLab and OKLCH blending work in every browser?

Current versions of Chrome, Edge, Firefox, and Safari support it. Older browsers ignore a line they cannot read, so the copied CSS starts with a standard sRGB line. Those browsers use that line and newer ones use the second.

How do I use the gradient with Tailwind CSS?

Pick the Tailwind v4 or Tailwind v3 tab and copy the classes. When Tailwind's own gradient classes can make your gradient, you get those, such as bg-linear-90/srgb from-[#6366f1] to-[#f59e0b] in v4. Otherwise you get one bg-[...] class. Both versions have only three color slots (from, via, and to) and no repeating gradients. v3 also only points to a side or corner, with no angles, radial, conic, or OKLab blending, so it falls back to the bg-[...] class more often.

Why does the Tailwind class end in /srgb?

Tailwind v4 blends gradient colors in OKLab by default, while plain CSS blends in sRGB. The /srgb ending tells Tailwind to use sRGB, so the result matches the preview when Color blending is set to Standard. Pick Smooth (OKLab) and the ending goes away.

Should I write the angle in degrees or as a keyword like to right?

Under Write the direction as, pick Degrees or Keyword. Straight keywords are exactly the same as their angle, so to right equals 90deg. Corner keywords are different: to top right aims at the corner, so on a wide box it is flatter than 45deg. Use degrees for an exact angle, and a corner keyword when the gradient should always run corner to corner. Only the eight arrow directions have keywords, so Keyword is turned off for any other angle.

What does Repeat the pattern do?

It switches to repeating-linear-gradient, repeating-radial-gradient, or repeating-conic-gradient. The colors repeat after the last stop, so you only see a change once the last stop is below 100%. It is the usual way to make stripes, rings, and checker-like patterns in CSS.

Is the CSS gradient generator free and private?

Yes. It is free with no signup, and everything runs in your browser. Nothing you make is sent to a server.