Gradient Generator
Design CSS gradients visually — drag stops on the track, click to add, tune type/direction, and export CSS, Tailwind, or SCSS. Live preview & shareable URL.
About this ToolHow it works, benefits & use casesTap to collapse
Design CSS gradients by manipulating them directly instead of typing syntax. The Gradient Generator gives you an interactive stop track: drag a color stop to reposition it, click an empty part of the track to add a new stop (it samples the nearest color), and select any stop to edit its color and 0–100% position or delete it. Switch between linear, radial, and conic gradients — linear adds eight named directions plus a 0–360° angle slider, radial offers circle/ellipse shape and a position, and conic spins from an angle. A large live preview shows the result as you work, and six built-in presets (Sunset, Ocean, Forest, Purple Haze, Fire, Emerald) or the Randomize button give you a fast starting point. Export the result as a raw CSS value, a full background rule, an SCSS variable, or a Tailwind arbitrary-value class. Everything runs in your browser and the whole gradient is captured in a shareable URL.
How to Use
- 1Start from a preset, click Randomize, or edit the default two-stop gradient.
- 2Drag stops along the track to reposition them, or click an empty spot on the track to add a new stop.
- 3Select a stop to change its color with the picker, fine-tune its position with the slider, or remove it (two stops minimum).
- 4Choose the gradient Type — Linear, Radial, or Conic — then set the direction/angle (linear) or shape and position (radial/conic).
- 5Pick an export format (CSS value, CSS background, Tailwind, or SCSS) and copy or download the output.
- 6Copy the page URL to share the exact gradient with someone else.
Key Benefits
- Drag-and-click stop track — reposition, add, and delete color stops visually
- Linear, radial, and conic gradients from one tool
- Named directions plus a 0–360° angle slider for linear gradients
- Six curated presets and a Randomize button for fast starting points
- Large live preview that updates as you edit
- Exports CSS value, CSS background rule, SCSS variable, or Tailwind arbitrary class
- Shareable URL encodes the full gradient; nothing leaves your browser
Common Use Cases
- Creating hero, button, or card background gradients for a website
- Generating a Tailwind bg-[...] arbitrary value for a component
- Prototyping radial and conic effects without memorising the syntax
- Producing an SCSS gradient variable for a design system
- Sharing a precise gradient spec with a designer or teammate via URL
Color stops
Drag a stop to move it · click the track to add one.
Presets
Live · copy or download
background: linear-gradient(to right, #3b82f6 0%, #8b5cf6 100%);
Was this tool helpful?
Share Your Experience
Help others discover this tool!
Related tools
- CSS FormatterFormat and beautify CSS code
- Unused CSS DetectorFind CSS selectors never matched by your HTML, see how many bytes you can save, and get cleaned CSS - with a safelist for dynamic classes
- View Transitions CSS GeneratorGenerate cross-document @view-transition CSS and the startViewTransition() JS path — with a live preview
- Container Queries GeneratorDesign CSS @container queries with a live, resizable preview — export CSS, SCSS, and Tailwind v3 + v4
- CSS Clip Path GeneratorDraw clip-path shapes by dragging vertices on a live canvas — polygon, circle, ellipse, inset — with 25 ready-made shapes. Export CSS, SCSS, Tailwind, or JS
- CSS MinifierMinify CSS code
Linear, radial, and conic. Linear gradients support eight named directions (to right, to bottom left, and so on) plus a custom angle from 0 to 360 degrees. Radial gradients let you pick a circle or ellipse shape and a position, and conic gradients spin from a chosen angle around a position.
Click any empty part of the stop track to add a stop — it samples the color of the nearest existing stop. Select a stop and use the trash button to remove it. A gradient always keeps at least two stops, so the remove button only appears when you have more than two.