About the Gradient Generator
The Gradient Generator builds CSS gradients visually. Pick two to eight colors, drag their positions, choose a linear, radial or conic gradient, and copy two lines of CSS that are ready to paste into your stylesheet.
Gradients are everywhere in modern design: hero sections, buttons, cards, backgrounds, avatars and loading placeholders. Writing them by hand means guessing angles and stop positions and reloading the page to check. Here the preview updates on every change, so you can see exactly what you will get.
Turn on "Smoother blend" to mix colors in OKLCH, which avoids the gray, muddy middle that some color pairs get. Six presets and a random button give you a starting point. Everything runs in your browser.
How to use it
- Start from a preset or randomClick Sunset, Ocean, Forest, Peach, Night or Lime, or press Random for a new two or three-color gradient.
- Choose the gradient typeLinear runs in a straight line at the angle you set. Radial spreads out from a center point as a circle or an ellipse. Conic sweeps around a center point like a color wheel.
- Edit the colorsUse each color box, or type any CSS color into the text field next to it. Move the slider to set where that color sits, from 0% to 100%.
- Add or remove colorsAdd color places a new color in the biggest gap between the existing ones, up to eight. The × button removes one, down to two.
- Copy the CSSClick Copy CSS and paste both lines into the rule for your element.
Key features
Three gradient types
Linear with any angle, radial as a circle or an ellipse with a movable center, and conic with a start angle and a movable center.
Up to eight colors
Each with its own position. Colors are sorted by position in the CSS, so you can drag them past each other freely.
Smoother blend in OKLCH
Adds "in oklch" to the gradient, so colors blend through vivid in-between shades instead of gray. The option is grayed out in browsers that do not support it.
Repeating gradients
Turns the gradient into a repeating pattern when the last color stops before 100%, for stripes and rings.
Any CSS color, with transparency
The text fields accept HEX, rgb(), hsl(), oklch() and color names, including transparent colors.
A safe fallback line
The first line sets a plain background color, so very old browsers, email clients and anything that cannot read the gradient still show a matching color.
Examples
The default gradient
The tool opens with the Lime preset at 135 degrees, which runs from the top left to the bottom right:
background: #c6f24e;
background: linear-gradient(135deg, #c6f24e 0%, #2b59ff 100%);The first line is the fallback, the first color of the gradient. Browsers that understand the second line use it instead.
Same colors, different types
With the Sunset preset (#ff7e5f to #feb47b):
| Settings | CSS |
|---|---|
| Linear, 90° | linear-gradient(90deg, #ff7e5f 0%, #feb47b 100%) |
| Radial, circle | radial-gradient(circle at 50% 50%, #ff7e5f 0%, #feb47b 100%) |
| Radial, ellipse, center X 30% | radial-gradient(ellipse at 30% 50%, #ff7e5f 0%, #feb47b 100%) |
| Conic, 90° | conic-gradient(from 90deg at 30% 50%, #ff7e5f 0%, #feb47b 100%) |
| Linear, smoother blend | linear-gradient(90deg in oklch, #ff7e5f 0%, #feb47b 100%) |
A linear angle of 0deg runs from bottom to top, 90deg from left to right, and 180deg from top to bottom.
Three colors
The Night preset puts a third color in the middle:
linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%)Stripes with a repeating gradient
Take the Lime preset, set the angle to 45°, move the second color to 20% and check Repeating:
repeating-linear-gradient(45deg, #c6f24e 0%, #2b59ff 20%)The 0% to 20% blend now repeats five times across the box. For hard-edged stripes, use four colors: lime at 0% and 10%, blue at 10% and 20%:
repeating-linear-gradient(45deg, #c6f24e 0%, #c6f24e 10%, #2b59ff 10%, #2b59ff 20%)A transparent color
Type rgb(20 22 31 / 50%) into the first color's text field and the CSS uses #14161f80, the same color as 8-digit HEX. Fading to a transparent color is a common way to darken the bottom of a photo so white text stays readable.
Tips
- Keep both lines of CSS. The fallback costs nothing and keeps the design acceptable wherever gradients do not work.
- Try "Smoother blend" with colors from opposite sides of the color wheel, like blue and yellow. Without it, the middle often turns gray.
- Gradients between colors of similar lightness look calm. A big jump from very light to very dark draws the eye, which suits buttons and banners.
- For text on a gradient, check contrast against both ends with the Color Picker. The text has to be readable on the lightest and the darkest part.
- To review or tweak a gradient you already have, paste it into the CSS Gradient Previewer instead of rebuilding it here.
Common mistakes and limits
- Expecting "in oklch" to work everywhereBrowsers that do not support it ignore the whole gradient line and show only the fallback color. Leave the option off if you must support older browsers.
- Checking Repeating with stops at 0% and 100%A pattern that already fills the box has nothing to repeat. Move the last color below 100% to see stripes or rings.
- Mixing up the angle directionIn CSS, 0deg points up and angles turn clockwise. 90deg runs left to right, not bottom to top.
- Putting a gradient in background-colorGradients are images in CSS. Use background or background-image, as the generated code does.
- Using many strong colorsMore than three saturated colors in one gradient tends to look busy. Two or three colors usually work better.