Gradient Generator
Create linear and radial gradients with unlimited color stops.
How to generate a gradient
- Start from a preset, or set your own colors as stops.
- Add as many color stops as you like and drag them along the bar to place each color.
- Switch between linear, radial and conic, and tune the angle.
- Export in the format you need: CSS, Tailwind, SCSS, SVG or JSON.
What is a gradient generator?
A gradient generator is a visual tool for building a multi-color blend without writing any code by hand. You place colors as stops, choose how they spread, and the generator produces the output for whatever you are working in, from a stylesheet to an SVG asset. Building it visually means you see the blend update live instead of guessing at numbers.
How many color stops should a gradient have?
Most clean gradients use two or three stops; more than that risks looking busy unless the colors are closely related. The number of stops changes the character of the blend:
What are the types of gradients?
- Linear blends colors along a straight line at the angle you set.
- Radial spreads colors outward in a circle or ellipse from a center.
- Conic sweeps colors around a center point like a color wheel or pie chart.
- For a single ready-made fill, the Gradient Background tool is tuned for that one job.
How do I export a gradient to SVG or Tailwind?
Beyond CSS, the generator outputs the same gradient in several formats so it drops into whatever you build with. Switch the export tab to SVG for a self-contained vector asset, Tailwind for an arbitrary class, SCSS for a variable, or JSON to store the stops as data. Each updates live, so you tweak the colors once and copy wherever you need it.
Are gradients still in style?
Yes, more than ever, though the look has shifted. Flat two-stop gradients give interfaces gentle depth, while soft, multi-stop mesh gradients have replaced the harsh diagonal blends of the past. The trick is restraint: a subtle gradient adds polish, while an over-saturated one quickly dates. Picking an interpolation like OKLCH keeps the mid-tones clean rather than muddy.
As many as you add. Each stop gets its own color and position, though two or three usually look cleanest.
Yes. Use the SVG export tab for a vector you can save, or copy the CSS for a code-drawn gradient with no file.
They share the same builder; this page focuses on generating and exporting gradients in multiple formats, while the CSS Gradient page focuses on the CSS code itself.
Linear for backgrounds and buttons, radial for spotlights and glows, conic for wheels, pie charts and loaders.