Gradient Maker
Build linear, radial, and conic CSS gradients. Drag color stops along the bar, set the angle, pick how the colors blend, and copy the CSS in one click.
Click the bar to add a stop. Drag a stop to move it, or drag it off the bar to remove it.
Gradient Inspiration
Get inspired by the top gradients on ColorKit.
How to use the gradient maker
- Pick a starting point: choose a preset, hit Random, or use AI to generate colors from a phrase like “beach sunset”.
- Edit the color stops. Click a stop to select it, then change its color or position. Click an empty spot on the bar to add a stop, and drag a stop off the bar (or use Remove) to delete it.
- Choose Linear, Radial, or Conic, and set the angle with the slider or by typing a number.
- Copy CSS puts the code shown under the controls on your clipboard. Export has more options, including a PNG download.
Types of CSS gradients
Every gradient here is plain CSS, so it scales to any size and adds no image weight to your page. There are three kinds:
linear-gradient()blends colors along a straight line at the angle you set. It is the usual pick for buttons, hero backgrounds, and cards.radial-gradient()spreads outward from a center point, which suits spotlights and soft focal areas. The angle does not apply to it.conic-gradient()sweeps colors around a center point, the basis for color wheels, pie-style charts, and angular accents. The angle sets where the sweep starts.
A two-color linear gradient running left to right looks like this:
background: linear-gradient(90deg, #5efce8 0%, #736efe 100%);The angle sets the direction: 0deg points up, 90deg runs left to right, 180deg runs top to bottom, and 45deg runs on a diagonal. Each percentage is where that color sits along the line.
Smooth, Natural, and Classic blending
Browsers blend gradients in sRGB by default, and that is why a gradient between two far-apart colors (blue to yellow, say) often passes through a dull gray in the middle. Newer CSS lets you choose the color space a gradient blends in:
- Smooth blends in OKLCH (
in oklch). Colors stay vivid through the middle because the blend travels around the hue wheel. - Natural blends in OKLab (
in oklab). Brightness changes evenly and the hue takes a straight path, so it never detours through an unrelated color. - Classic is the plain sRGB blend that every browser has always used.
With Smooth or Natural selected, the copied CSS has two lines. The first is a plain sRGB fallback, and the second uses the newer syntax. Browsers that understand in oklch use the second line, and older ones ignore it and keep the first.
Tips for better gradients
- Keep colors close in hue or brightness for a calm blend, or push them apart for something bolder.
- Two or three stops usually read cleaner than a crowd of colors. Add a stop only where you want the blend to change direction.
- If the middle of a blend looks muddy, switch to Smooth blending or drop in a richer middle stop.
- Check text contrast on both ends of the gradient, not just the middle. The contrast checker helps here.
- Reuse a gradient’s colors as a palette in the palette generator, or browse the gradient gallery for ready-made combinations.
Frequently asked questions
What is a gradient generator?
A gradient generator is a browser tool for blending two or more colors into a smooth transition and giving you the CSS to use it. This one lets you place several color stops, control exactly where each sits, and export the result as CSS or an image.
Can I make a gradient with more than two colors?
Yes. Click anywhere on the bar or use Add to place a new stop, up to eight. Each new stop starts with a color blended from its neighbors, so the gradient does not jump.
Can I start from hex codes I already have?
Yes. Select a stop and paste a hex code into Stop color. You can also put hex codes in the address, separated by dashes, like colorkit.co/gradient-maker/5efce8-736efe/, and the maker opens with those colors.
Can I save or share a gradient?
Save stores the gradient in your ColorKit account. The address bar also updates as you edit, with the colors, type, angle, and stop positions, so copying the URL shares the exact gradient.
Can I use these gradients with Tailwind or CSS variables?
The copied CSS works anywhere a background rule does. If you want the individual colors as design tokens, open them in the shades generator or palette generator, which export as CSS variables, SCSS, JSON, or a Tailwind config.