To make a CSS gradient, choose Linear Gradient or Radial Gradient under Gradient Type, then drag the color stop dots on the live preview or type exact values in the Color Stops cards. The code under the preview updates as you edit. Select Copy CSS to copy the finished rule, or Download CSS to save it as a .css file.
How to use the CSS gradient generator
- Pick a type or a preset. Set Gradient Type to Linear Gradient or Radial Gradient, or start from one of the Quick Gradient Presets and adjust it.
- Place your colors. Drag the stop dots across the preview to move them, and select Add Color Stop for another color. Each stop card has a color picker, the HEX code, a position slider, an opacity slider and a number field for exact values.
- Set the direction or shape. For a linear gradient, move the Angle slider (it starts at 135°). For a radial gradient, choose Circle or Ellipse and a Radial Extent, then drag the center point or use the Radial Center X and Y sliders.
- Copy the code. Type your class in CSS Selector, choose background or background-image under Output Property, then select Copy CSS or Download CSS.
Linear gradient CSS syntax explained
A linear gradient blends colors along a straight line. The first value is the direction, followed by a list of color stops, each with an optional position:
.gradient-box {
background: linear-gradient(135deg, #4f46e5 0%, #ec4899 100%);
}Angles follow a clock: 0deg points up, 90deg points right and 180deg points down. If you leave the angle out, CSS uses to bottom, which is the same as 180deg. The 135° default in this editor runs from the top-left corner to the bottom-right, a common choice for buttons and hero banners.
Stop positions are percentages of the gradient line. Two stops at the same position create a hard edge instead of a blend, which is how CSS stripes are made. Use the number field on a stop card when you need that kind of precision, since dragging is quicker but less exact.
Radial gradient CSS: shape, size and center
A radial gradient spreads outward from a center point. Its full form looks like this:
background: radial-gradient(circle farthest-corner at 30% 40%, #22d3ee, #1e3a8a);The shape is circle or ellipse, and the center is set with at x y. When you leave these out, CSS draws an ellipse, centered, sized to the farthest corner. The Radial Extent menu sets where the last color stop lands:
| Radial Extent | Where the gradient ends |
|---|---|
| Farthest Corner | At the corner of the box farthest from the center (the CSS default) |
| Closest Corner | At the corner nearest to the center |
| Farthest Side | At the side of the box farthest from the center |
| Closest Side | At the side nearest to the center, so the outer color fills more of the box |
Moving the center off the middle with Radial Center X and Y, or by dragging it, gives a spotlight effect. Center Radial Point puts it back at 50% 50%.
How to use a CSS gradient background
Gradients are images in CSS, so they belong to background or background-image, never background-color. The Output Property menu lets you pick:
- background is the shorthand. It's the shortest option, but it resets any background color, size or position set earlier on the same element.
- background-image only sets the gradient, so a solid
background-coloryou declared stays in place as a fallback.
.hero {
background-color: #4f46e5;
background-image: linear-gradient(135deg, #4f46e5, #ec4899);
}You can also stack several gradients on one element by separating them with commas; the first one listed is drawn on top. If you have a brand color in RGB, turn it into a HEX code with the RGB to HEX converter, or sample a color from a photo with the image color picker before pasting it into a stop.
Tips for smoother, cleaner gradients
Colors that sit opposite each other on the color wheel, such as blue and orange, often pass through a dull grey in the middle. Add a third stop with a brighter in-between color to keep the blend lively.
To fade into the page, lower one stop's opacity slider instead of picking white. A stop at 0% opacity lets whatever is behind the element show through, which works well over photos.
Reverse Stops flips the order of the colors in one click, and Random Angle or Random Gradient help when you want ideas. If you go too far, Undo and Redo step back and forward through your edits. When the CSS is in your stylesheet, run it through the CSS beautifier to keep the formatting consistent with the rest of the file.
Frequently asked questions
Is this CSS gradient generator free?
Yes. It's free with no sign-up, and the gradient is built entirely in your browser, so nothing you make is uploaded.
What's the difference between a linear and a radial gradient?
A linear gradient blends colors along a straight line at an angle you choose. A radial gradient spreads outward from a center point in a circle or ellipse.
How do I make a transparent gradient in CSS?
Lower the opacity slider on one of the color stops. The generated CSS then fades from a solid color to a see-through one, so the content behind the element shows through.
Should I use background or background-image for a gradient?
Use background-image if you also set a background-color as a fallback, because the background shorthand resets it. Use background when the gradient is the only background setting on that element.
Do CSS gradients work in all browsers?
Yes. The unprefixed linear-gradient() and radial-gradient() functions work in all current versions of Chrome, Edge, Firefox and Safari, so you don't need vendor prefixes.
Can I make a conic or repeating gradient with this tool?
No. The generator creates linear and radial gradients only. You can still copy its output and change the function name to repeating-linear-gradient() by hand if you need a repeating pattern.