Design Stunning Gradients — CSS, Tailwind, SVG & PNG
Build linear, radial and conic gradients with unlimited color stops. Copy ready-to-paste CSS or Tailwind, export SVG or a 1920×1080 PNG.
5 of 5 free uses left
background: linear-gradient(135deg, #ff6b35 0%, #e84393 100%);
bg-[linear-gradient(135deg,_#ff6b35_0%,_#e84393_100%)]
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none">
<defs>
<linearGradient id="g" x1="0.146" y1="0.146" x2="0.854" y2="0.854">
<stop offset="0%" stop-color="#ff6b35" />
<stop offset="100%" stop-color="#e84393" />
</linearGradient>
</defs>
<rect width="100" height="100" fill="url(#g)" />
</svg>SVG export converts to a linear gradient (radial/conic supported in CSS only).
Color codes chart
Click a stop above to select it, then tap any color to apply it. Currently editing: Stop 1.
Reds
Oranges
Yellows
Greens
Blues / Cyans
Purples / Pinks
Browns
Neutrals
Design Stunning Gradients — CSS, Tailwind, SVG & PNG
Gradients went out of style for about five years and came roaring back. Today they're the visual signature of nearly every modern brand identity — Stripe, Linear, Vercel, Spotify, Apple. Done well, a gradient gives a flat UI depth, energy and personality without any of the noise of a textured background. Done badly, it looks dated faster than anything else in design.
Our Gradient Generator is the workbench you need to design gradients fast and ship them in whatever format your stack requires. Pick a **type** — linear (the classic two-direction blend), radial (a circular spotlight from the center), or conic (a sweeping pie-chart-like rotation that powers modern aurora and chrome effects). Adjust the **angle** with a precise slider (0-360°). Add up to **six color stops**, drag each one's **position** anywhere from 0% to 100%, and pick colors with the native color picker or paste any hex code.
Every change updates the live preview instantly. The output panel shows three ready-to-paste forms simultaneously: the raw **CSS** rule (`background: linear-gradient(...);`), the **Tailwind arbitrary value** (`bg-[linear-gradient(...)]`) for Tailwind v3 projects, and a complete **SVG** with proper coordinate math so the same gradient works inside any SVG illustration, logo or background. One-click copy on each format.
For non-web use cases — slides, marketing assets, social posts, app hero images — export the gradient as a **1920×1080 PNG** or as a **scalable SVG** file. Eight curated presets (Sunset Blaze, Ocean Deep, Midnight Indigo, Neon Mint, Vapor Chrome, Cherry Blossom, Aurora Glow, Burnt Sienna) cover the most common modern palettes; the "Random" button generates new combinations when you're hunting for inspiration. Everything runs locally — no upload, no server, no waiting.
How It Works
Pick a Type & Direction
Choose linear, radial or conic. Set the angle for the direction the gradient travels.
Place Color Stops
Add 2-6 stops, pick colors, drag positions. Try a preset or randomize for inspiration.
Copy or Export
Copy CSS, Tailwind or SVG with one click — or download a 1920×1080 PNG / SVG file.
Why Use Our Tool?
Linear, Radial & Conic
All three modern gradient types — including the conic gradients behind every aurora and chrome effect on the web today.
Up to 6 Color Stops
Multi-stop gradients with per-stop color and position control for complex blends and brand-specific palettes.
Three Formats, One Click
Copy raw CSS, Tailwind arbitrary value, or full SVG markup — all generated and updated in real time.
PNG & SVG Export
Download a print-ready 1920×1080 PNG or a scalable SVG for slides, social posts and marketing assets.
Curated Presets
Eight on-trend palettes (sunset, ocean, aurora, vapor chrome) plus a randomizer when you want fresh ideas.
100% Local & Private
Everything runs in your browser. No upload, no account, no tracking of your color choices.