CSS Gradient Generator
A CSS gradient generator with a live preview: pick linear, radial or conic, stack up as many color stops as you want, then copy the value into a background rule.
Preview
The band comes back as soon as there is a second stop.
Interpolation
Color stops
As a hero
As an accent
On a control
background: linear-gradient(105deg in oklab, #f6d365 0%, #fda085 100%);the declaration--brand-gradient: linear-gradient(105deg in oklab, #f6d365 0%, #fda085 100%);where it lands in a codebasebg-linear-105 from-[#f6d365] to-[#fda085]Tailwind interpolates in oklab alreadybackground: linear-gradient(105deg in oklab, #f6d365 0%, #fda085 100%);so the next reader can reopen itCSS
How to use
- Start on the segmented Type control, since linear, radial and conic each read the rest of the panel differently.
- Drag the Angle slider or type a number from 0 to 360 into the box beside it. Radial mode hides this row.
- Click a swatch to open your system color picker and set the percentage next to it, or clear the percentage to let the browser space that stop.
- Press Add stop for a third color. It lands in the widest gap; if you retype a percentage lower than the one above it, the row is marked rewritten until the numbers climb again.
- Check the preview band, hit Copy CSS, and paste the value after background: in your stylesheet.
About this tool
The gradient you want is usually two or three tweaks away from the gradient you're staring at, and a CSS gradient generator is worth using only if those tweaks are free. Change a swatch, nudge the angle slider, and the preview band at the top repaints while you're still moving it, with the page around it tinted the same way. When the band looks right, the string in the code box is already the answer.
Three types are on the segmented control at the top. Linear runs the blend along a straight line at whatever angle you dial in. Radial pushes color outward from the middle. Conic sweeps it around a circle like a pie chart, starting from the angle you set. The Angle field applies to linear and conic; switch to radial and it disappears, because the output for radial is a plain centered circle with no direction to give it.
Every color stop is a swatch, a percentage box and an Alpha slider. You start on Golden hour, the first of five presets, and Add stop drops a new stop into the widest gap, already wearing the color the band shows there, so nothing jumps until you change it. Clear a percentage box and that stop goes into the CSS with no position at all, which hands the spacing back to the browser. Stops come out in the order the rows sit on screen; if a lower percentage follows a higher one, the row is marked rewritten and the track under the band shows where the browser will really draw it.
What lands in the code box is the whole value, ready to sit after background: in any stylesheet. No prefixes, no build step, nothing framework-specific about it. The same string drops into a Tailwind arbitrary value or a styled-component template literal unchanged.
Building a dark three-stop header
Leave the type on Linear and type 135 into the Angle box. Click the first swatch and set it to #0f172a, then the second and set it to #64748b. Press Add stop once: the new stop lands at 50%, between the two, wearing the color the band already had there, so set that one to #334155.
Pick sRGB under Interpolation if you want the plain string. The code box now reads linear-gradient(135deg, #0f172a 0%, #334155 50%, #64748b 100%). Copy CSS puts that on the clipboard, and the rule you paste it into is header { background: linear-gradient(135deg, #0f172a 0%, #334155 50%, #64748b 100%); } with nothing else needed.
Good to know
- Each stop's transparency is a whole percentage on its Alpha slider, written as rgba() with the shortest alpha. Colors typed in other notations, like hsl() or oklch(), are converted to that form rather than kept as typed.
Frequently asked questions
Which way does 0deg point in a linear gradient?
Straight up. 90deg points right, 180deg points down and 270deg points left. The slider covers the full 0 to 360 range, and 45deg gives you the corner-to-corner look most hero sections use.
Why did my new color stop land at the end of the gradient?
Add stop puts the new stop in the widest gap, so that only happens when a percentage is typed lower than one above it. The CSS is written in row order rather than sorted, and the browser drags a lower percentage up to match its neighbour, which gives a hard edge instead of a blend. The page marks that row rewritten and draws where it really lands on the track under the band; make the percentages climb and the mark goes away.
Can I move the center of a radial gradient or squash it into an ellipse?
Not from the controls. Radial mode always writes radial-gradient(circle, ...) with the default center. Both are a short edit once you've copied the string: swap circle for ellipse, or write circle at 20% 80% to shift the origin. Everything after the first comma stays exactly as generated.
Do I still need -webkit- prefixes for this?
No. The output uses the standard linear-gradient, radial-gradient and conic-gradient syntax, which every browser shipping today understands. Conic is the youngest of the three and has been safe since 2020.
Why does the middle of my gradient look muddy?
Hex colors blend in sRGB unless the gradient names another space, and the straight path between two saturated hues often dips through a grey. Blue to yellow is the classic offender, passing through rgb(128, 128, 128). The Interpolation control writes in oklab by default, which keeps the middle colored, and with sRGB chosen the page names any pair that turns grey.
How do I use one of these as gradient text?
Set the copied value as the element's background, then add background-clip: text and color: transparent. The text acts as a mask over the gradient. The generator only produces the gradient value itself, so those two extra properties are yours to write.
Missing something in CSS Gradient Generator? Suggest a feature →
Tell someone who needs this.