CSS Gradient Generator

A color gradient you tune by eye, with CSS ready to paste

This CSS gradient generator shows your gradient in a large preview and writes the code as you go. Pick a type ("Linear", "Radial" or "Conic"), set the angle, then place 2 to 8 color stops, each with its own position and opacity. Everything runs in your browser, handy for a hero section, a button or a slide background without opening a design app.

How to make a gradient

1. Choose the type. For a linear gradient, move the "Angle" slider or click one of the "Direction" arrows. For a radial gradient, choose the "Shape" (circle or ellipse) and the position of the center.
2. Under "Color stops", click the bar to add a stop and drag a handle to move it, with a mouse or a finger. Each row sets the color (picker or HEX code), the "Position %" and the "Opacity %". The × button removes a stop and "Reverse order" flips the gradient.
3. Under "CSS code", pick the output: background, background-image, "Utility class" or "SVG" (linear only), then click "Copy code".
4. "Download PNG" saves a 1920 × 1080 px image by default, up to 8000 px per side.

"Random gradient" (or the space bar) draws 2 or 3 colors with neighboring or opposite hues, and the gallery holds 16 presets. "Save this gradient" keeps up to 12 on your device; after that, you have to delete one first. The page address follows every setting: copy it to share the gradient.

CSS gradient syntax explained

Click "Lagoon" in the gallery and the tool writes:

background: #0e9aa7;

background: linear-gradient(90deg, #0e9aa7 0%, #7be0c3 100%);

The first line is a solid fallback color. The second draws the gradient: an angle, then the stops, each made of a color and a position. Angles work like a compass: 0deg points up, 90deg points right, 180deg points down. Keywords say the same thing: to right equals 90deg and to bottom equals 180deg.

• radial-gradient(circle at 50% 50%, #fff3b0 0%, #7a1f3d 100%) starts from a center point and spreads as a circle to the farthest corner.
• conic-gradient(from 0deg at 50% 50%, #ff0000 0%, #0000ff 100%) sweeps around the center starting at the top.
• Any opacity below 100 turns the color into rgba: #0e9aa7 at 40% becomes rgba(14, 154, 167, 0.4).

Hard stripes. Two stops at the same position remove the blend. linear-gradient(90deg, #2b1b5a 0%, #2b1b5a 50%, #ffd3a5 50%, #ffd3a5 100%) gives two flat halves with a sharp edge.

Design tips for a clean linear gradient

• Neighboring hues blend smoothly. Two colors close together on the color wheel, such as teal and mint, never look muddy.
• Watch the gray middle between opposites. Halfway between red #ff0000 and cyan #00ffff, the blend lands on a mid gray close to #808080. Add a colored stop in between: the "Coral to turquoise" preset passes through a sandy yellow at 50%.
• Check that text stays readable. The tool gives the WCAG contrast of white and black text on the two end colors. On "Lagoon", white text scores 3.38:1 on the teal end and 1.57:1 on the mint end, both under the 4.5:1 AA threshold, while black text reaches 6.19:1 and 13.29:1. Black is the safe choice there.
• Prefer CSS to an image. One line of code weighs a few dozen bytes and stays sharp on any screen. Keep the PNG for slides or wallpapers.

All three functions work in all current browsers without a vendor prefix.

Frequently asked questions

What is the difference between background and background-image?

background is a shorthand that resets the other background settings (position, repeat, size). background-image only touches the image. In that format the tool writes the background-color line only when every stop is opaque, because it would show through a transparent gradient.

How do I put a gradient on text?

Set the gradient as the background of the text, then add background-clip: text and color: transparent. The "Gradient text" preview shows the result with your colors.

How do I fade a gradient to transparent?

Give two stops the same color and set the opacity of one to 0. The "Dark veil" preset goes from 0 to 85% this way: laid over a photo, it keeps a white headline readable.

Are my saved gradients sent anywhere?

No. They stay in your browser's storage on this device. To get a gradient on another device, copy the page address and open it there.