How it works
- 1
Choose a gradient type and angle
Pick linear, radial, or conic. For linear and conic, drag the angle slider or click one of the 8 preset angles (0°, 45°, 90°…). Or pick from the 12 included presets to start instantly.
- 2
Edit the color stops
Click any swatch to open the color picker, or type a hex value directly. Drag the position slider to move a stop. Add stops with '+ Add color stop' or remove any stop with the × button (minimum 2 stops).
- 3
Export in your format
Copy the raw CSS value, or use the Export panel for a full CSS class, Tailwind class string, React inline style object, or SCSS variable.
Type
Angle
135°Color Stops
CSS Value
background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);Presets
Export
.element {
background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
}🛡️ Verify zero uploads — open DevTools → Network tab
Open your browser's DevTools (F12), go to the Network tab, and use this tool. You will see zero outbound requests — all processing runs inside your browser sandbox via WebAssembly or pure JavaScript. Nothing you paste or upload is ever sent anywhere.
Use cases
Hero section backgrounds
Build a subtle multi-stop gradient with low-contrast stops for section backgrounds, preview it live, then copy the CSS value straight into your stylesheet.
Button and card gradients
Use a 2-stop gradient at 135° for CTA buttons. Copy as a Tailwind `bg-[...]` arbitrary value class and paste directly into JSX.
Conic color wheels
Use the conic gradient type with 4+ color stops evenly spaced to build color wheel illustrations or pie-chart-style decorative elements.
Frequently Asked Questions
What is the difference between linear, radial, and conic?
Linear gradients blend along a straight line at a given angle. Radial gradients radiate outward from a center point in a circle. Conic gradients rotate around a center point, like a color wheel.
How does Tailwind export work for non-standard angles?
Tailwind's built-in gradient utilities support 8 directions (to-t, to-r, etc.). If your angle matches one of those and you have 2–3 stops, the export uses from-/via-/to- utility classes. For other angles or more stops, it falls back to a Tailwind arbitrary value: bg-[linear-gradient(...)]. Both work in Tailwind v3+.
Can I have more than 3 color stops?
Yes. Click '+ Add color stop' to add as many stops as you need. The CSS, React, and SCSS exports support any number of stops. The Tailwind export falls back to arbitrary value syntax for more than 3 stops.
Does radial gradient support ellipse shape?
The current implementation uses circle for radial gradients. Ellipse support (radial-gradient(ellipse, ...)) is on the roadmap.
Does anything leave my browser?
No. All gradient CSS is generated in JavaScript inside your browser tab. No server calls are made — the tool works completely offline after the initial page load.
Want unlimited access + saved history?
Pro is $9/month · 30-day money-back guarantee.