CSS Gradient Generator
Build a linear, radial, or conic gradient visually with as many color stops as you need, then copy the CSS — or a ready Tailwind class.
Choosing between linear, radial, and conic
Linear gradients are the most common choice for backgrounds and buttons — pick an angle and let colors transition in a straight line. Radial gradients work well for spotlight or glow effects, fading outward from a center point. Conic gradients are less common but great for pie charts, color wheels, or loading indicators, since colors sweep around a center point rather than across or outward.
Frequently asked questions
What's the difference between linear, radial, and conic gradients?
A linear gradient transitions colors in a straight line across a chosen angle. A radial gradient transitions outward in a circle from a center point. A conic gradient sweeps colors around a center point like a color wheel or pie chart — useful for things like loading spinners or color pickers.
How do I control where each color starts and stops?
Each color stop has a position percentage — 0% is the start of the gradient and 100% is the end. Moving two stops closer together creates a sharper transition between them; spreading them apart creates a smoother blend. Use the position slider for the selected stop to fine-tune this.
Can I use more than two colors?
Yes — click "+ Add stop" to add as many color stops as you need. Each one gets its own color and position, and the generated CSS combines them all into one gradient declaration automatically.
How do I use this gradient with Tailwind CSS?
Switch the output format to "Tailwind arbitrary value" — it wraps the gradient in Tailwind's bg-[...] syntax and replaces spaces with underscores, which Tailwind's JIT compiler requires inside arbitrary values (e.g. bg-[linear-gradient(90deg,_#ff6b4a_0%,_#3f7d8c_100%)]).
Will this gradient work in all browsers?
Linear and radial gradients are supported in every browser in use today. Conic gradients are supported in all modern evergreen browsers (Chrome, Edge, Firefox, and Safari) but not in Internet Explorer, if that still matters for your project.
How do I animate a CSS gradient?
The simplest approach is to make the background larger than the element (e.g. background-size: 200% 200%) and animate background-position — gradients themselves can't be smoothly interpolated between two different gradient values with plain CSS transitions.