Gradient Maker
Build gradients and export clean CSS
Compose linear, radial and conic gradients with live previews, then copy the CSS, grab a Tailwind value, or download an SVG.
Type
Color stops
CSS
Randomized presets
FAQ
Gradient maker questions
What types of gradients can I build?
Linear, radial and conic CSS gradients. Add, remove and reorder color stops, drag them along the track, and adjust the angle or position with live controls.
How do I export the gradient?
Copy the generated CSS background (linear-gradient, radial-gradient or conic-gradient), the matching Tailwind arbitrary value, or download it as an SVG.
Can I start from an extracted palette?
Yes. Generate a palette on the Palette Generator page, then paste the HEX codes into the gradient stops to build a matching gradient in seconds.
Does it support transparency?
Each stop accepts an alpha value, so you can fade a color to transparent anywhere along the gradient.
Start now
Your next palette is one image away
Pick colors, extract palettes and export code — free, private and instant.