CSS Gradient Generator
Design a two-color CSS gradient and copy the code. Your work stays on this device whenever possible.
How to use CSS Gradient Generator
- Pick a "Gradient Type": Linear, Radial, Conic or Repeating Linear. Radial swaps the angle field for "Radial Shape & Position".
- Set the angle with the number box or slider, or press a "Quick Direction Presets" button from 0 to 270 degrees.
- Edit "Color Stops (2 to 5 stops)": choose each color, type a hex, drag its position slider, or use "+ Add Stop", "Reverse" and "Randomize".
- Or load one of eight "Curated Gradient Presets", such as Sunset Glow, Deep Space or Cotton Candy.
- Watch "Live Gradient Preview", then press "Copy CSS", "Copy Tailwind Class" or "Download High-Res PNG (1920x1080)".
Worked example
Leave the defaults: Linear, 135 degrees, #ff512f at 0% and #dd2476 at 100%. "Copy CSS" gives background: linear-gradient(135deg, #ff512f 0%, #dd2476 100%); Press "+ Add Stop" and a #4facfe stop appears at 85%, so the sorted output becomes #ff512f 0%, #4facfe 85%, #dd2476 100%.
When to use this tool
- Designing a hero-section background and pasting one line into a stylesheet.
- Generating a 1920 by 1080 wallpaper from two brand colors.
- Converting a look into a Tailwind arbitrary-value class without hand-editing underscores.
Important limitations
Generates standard W3C CSS linear, radial, and conic gradient declarations with vendor fallbacks. The OKLCH/OKLAB interpolation option needs a modern browser (Chrome/Edge 111+, Safari 16.4+) to render on-screen exactly as copied. SVG export isn't available for conic gradients, since SVG has no native conic gradient element.
Frequently asked questions
Why did 0 degrees turn into 135?
The code reads the angle with 135 as its fallback, and 0 counts as empty. The 0-degree preset and a typed 0 therefore produce 135deg in the CSS and the PNG. Type 360, which points the same way, instead.
Does the PNG match the on-screen preview?
Not always. The PNG is a straight two-point linear gradient whatever the type, so radial, conic and repeating designs export as linear. Its angle also follows canvas math, where 90 runs top to bottom, while CSS 90deg runs left to right.
What is the -webkit- line in the result box?
A legacy fallback copy with a prefix added. Old prefixed syntax measured angles differently and has no conic form, so modern browsers should use the standard line. "Copy CSS" gives that standard line alone.
How is the Tailwind class written?
Whitespace becomes underscores inside bg-[...], for example bg-[linear-gradient(135deg,_#ff512f_0%,_#dd2476_100%)]. Recent Tailwind versions accept arbitrary values in that form, but confirm it compiles in your own project before relying on it, and note that the class is a single long token.
How do stops behave?
Stops are sorted by position before output, so dragging one past another reorders them. "+ Add Stop" inserts #4facfe at 85 percent of the last stop's position. Hex boxes accept only six-digit codes, and the list must stay between two and five stops, so Remove disappears at two and Add Stop warns at five.