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.
Working with multiple color stops
A gradient is really just a list of color stops — a position along the gradient line and the color at that position. Two stops give you a simple blend; three or more let you build effects like a sunset, a metallic sheen, or a hard-edged stripe by placing two stops at the same position. Add stops with the button in the controls, drag the position sliders to move them, and remove any stop you no longer need. The live preview updates as you go, so you can judge the result before copying.
Copying the CSS or the Tailwind class
The generator writes a standard background-image rule you
can paste into any stylesheet, plus a matching Tailwind utility for
projects that use it. Because the output is plain CSS, it works in
plain HTML, React, Vue, or any framework — there is no runtime
dependency and nothing to install. If your gradient direction uses
deg values, note that 0deg points up and angles increase
clockwise, which is the opposite of how most people picture a compass.
Picking gradient colors that hold up
Gradients look best when the colors share a hue family or sit opposite each other on the color wheel. If you are starting from a photo, the color palette extractor pulls the dominant colors into hex values you can drop straight into the stop pickers. For depth behind cards and buttons, pair the gradient with a soft shadow from the box shadow generator.
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.