CSS Gradient Generator (Linear, Radial and Conic)

The same stops as a linear, radial and conic gradient

Linear gradient angles

Interpolating in sRGB and in OKLCH

How to make a CSS gradient

1. Choose the gradient type. Pick Linear for a color change along a line, Radial for one that spreads out from a point, or Conic for one that sweeps around a point like a color wheel.
2. Set the color stops. Each stop has a color (hex, rgb(), hsl(), hwb() or a name such as rebeccapurple, or use the picker) and a position from 0 to 100 percent. Use Add stop for up to 8 stops, and the Up, Down and Remove buttons on a stop to reorder or delete it. Reverse flips the whole gradient.
3. Set the direction or center. For a linear gradient set the angle in degrees (0 is up, 90 is right; the example uses 135). For a radial one choose circle or ellipse, how far it reaches, and its center. For a conic one set the start angle and the center.
4. Copy the CSS or the Tailwind class. Copy the background declaration into your stylesheet, or the bg-[...] class into your markup. For the example that is bg-[linear-gradient(135deg,_#1e6bb8_0%,_#7c3aed_55%,_#f59e0b_100%)]. Turn on OKLCH if you want smoother mid colors, and keep the fallback line the tool writes with it.
5. Check the text on top. The contrast table shows black and white text over the darkest and lightest stop. For the example, white text on #7c3aed is 5.69:1. Because a gradient is not one color, also look at the preview where your text will sit.

Frequently asked questions

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

A linear-gradient() changes color along a straight line at an angle. A radial-gradient() changes color outward from a center point, as a circle or an ellipse. A conic-gradient() changes color around a center point, sweeping like the hands of a clock, which is how pie charts and color wheels are drawn. All three take a list of color stops, for example radial-gradient(circle at 50% 50%, #1e6bb8 0%, #f59e0b 100%).

What does the angle in a linear gradient mean?

The angle is the direction the gradient line points. 0deg points to the top, 90deg to the right, 180deg to the bottom and 270deg to the left, so angles grow clockwise. The first stop is at the start of the line and the last stop at its end. Without an angle, CSS uses "to bottom" (180deg).

What do the stop positions do, and what if they are out of order?

A position says where along the gradient line, as a percentage, that color is fully reached; colors between two stops blend. If a stop is placed before an earlier one, CSS Images raises it to the same position as the largest earlier stop, which makes a hard edge. Two stops at the same position make a sharp line on purpose. The generator keeps positions in their slots when you reorder colors, so reordering never creates that by accident, and it tells you when your own positions do.

How do I use the gradient in Tailwind CSS?

Use an arbitrary value: bg-[...] with the gradient inside the brackets. Tailwind does not allow spaces in a class name, so each space is written as an underscore, which Tailwind turns back into a space in the CSS. For the example: bg-[linear-gradient(135deg,_#1e6bb8_0%,_#7c3aed_55%,_#f59e0b_100%)]. Colors are written as hex so they hold no spaces or commas of their own. Tailwind also has built-in gradient utilities for simple cases; the arbitrary form covers what they do not, such as conic gradients or a custom angle.

What does "in oklch" do, and what happens in an old browser?

Gradients blend colors in sRGB unless you say otherwise. CSS Color Level 4 lets you name another space after "in", and OKLCH is built around how bright and colorful a color looks, so blends between saturated colors tend to stay more vivid and even instead of turning gray in the middle. The generator writes two background lines: the plain sRGB one first, then the one with "in oklch" (linear-gradient(135deg in oklch, #1e6bb8 0%, #7c3aed 55%, #f59e0b 100%)). A browser that does not know the syntax drops the second line as invalid and uses the first.

How is the text contrast checked?

The tool finds the darkest and the lightest stop by WCAG relative luminance, then computes the WCAG 2 contrast ratio of white text on each and black text on each, with the same functions as the color contrast checker on this site. In the example the darkest stop is #7c3aed, where white text is 5.69:1 (AA) and black text 3.68:1 (AA large text only). AA needs 4.5:1 for normal text and 3:1 for large text.

Is checking the stops enough for text on a gradient?

It is a good first test but not a full one. The colors between two stops can be lighter or darker than both of them, and in a radial or conic gradient the text may sit anywhere. Text on a gradient has to pass against the color directly behind each letter, so check the parts of the preview that your text will cover, or use the color contrast checker with the color you see there.

How many color stops can I use?

The generator allows 2 to 8, enough for almost any design. CSS itself has no fixed limit. A gradient needs at least two stops, since one color would just be a flat background.

Which browsers support conic gradients and the in-oklch syntax?

Linear and radial gradients work in every current browser. Conic gradients have worked in all major browsers since 2020. The "in oklch" interpolation syntax works in Chrome 111, Safari 16.2 and Firefox 127 and later; earlier versions use the sRGB fallback line. Check your own browser support targets before you rely on it.

Is anything I enter sent anywhere?

No. The colors and settings are read and the CSS is built in your browser, and nothing you type is stored or sent anywhere.