Ultimate CSS Gradient Generator
Design stunning backgrounds using Linear, Radial, or Conic styles. Add unlimited color stops and export perfectly formatted code.
Saved Gradients
How To Build a CSS Gradient
Choose the Style
Select between classic Linear gradients, circular Radial gradients, or the modern Conic (pie-chart style) gradients to set the foundation.
Adjust Color Stops
Add as many colors as you want. Use the color picker to find exact shades, drag the percentage sliders to adjust their blend point, and reorder them by dragging.
Export and Use
Once it looks perfect in the live preview box, click the Copy button to instantly grab the vanilla CSS rule or the Tailwind CSS utility class.
Advanced Developer Features
Tailwind Arbitrary Values
Writing complex gradients in Tailwind usually requires editing tailwind.config.js. Our tool generates 1-line arbitrary values (like bg-[linear-gradient(...)]) that work instantly in your HTML.
Conic Gradients
Go beyond linear and radial. Our tool supports CSS conic-gradient(), which allows colors to transition around a center point, perfect for pie charts and modern UI glows.
Multi-Stop Sorting
Building complex mesh gradients? You can add unlimited color stops and physically drag and drop the rows to reorder how the colors flow into each other.
Frequently Asked Questions
A CSS gradient is a native browser feature that lets you display smooth transitions between two or more specified colors. Because they are generated by the browser's CSS engine rather than loaded as image files (like PNG or JPG), they load instantly, scale infinitely without blurring, and save bandwidth.
Yes! When selecting a color using the color picker in the stop list, you can adjust the opacity/alpha slider. This will generate an 8-digit HEX code or RGBA value, allowing the background behind the gradient element to show through.
The percentage slider dictates the exact "Color Stop" position. For example, if you have Blue at 0% and Red at 100%, the middle (50%) will be purple. If you move Red to 50%, the gradient will rapidly transition from Blue to Red in the first half of the box, and stay solid Red for the second half.
Unlike linear (straight line) or radial (circular from the center outwards) gradients, a conic gradient transitions colors rotated around a center point—much like slices of a pie chart or a radar sweep. It is great for modern UI elements like glowing borders and color wheels.
When you switch to the Tailwind export tab, our tool generates an arbitrary value class, for example: bg-[linear-gradient(90deg,#000_0%,#fff_100%)]. You can paste this directly into your HTML element's class list, and Tailwind's JIT compiler will automatically generate the corresponding CSS.
You don't need to delete and recreate colors to change their order. Simply click and hold the drag icon (the grid of dots) on the left side of any color row, and drag it up or down in the list to instantly change how the gradient flows.