CSS Gradient Generator
Mix up to 8 color stops into linear, radial or conic gradients — drag, tune, and copy production-ready code.
How to Use the Gradient Generator
- Choose a gradient type: linear, radial or conic.
- Click on the gradient bar to add a color stop; drag stops along the bar to reposition them.
- Select a stop to change its color, opacity and exact position (up to 8 stops).
- Adjust the angle (linear/conic), shape (radial) or center point until it looks right.
- Copy the CSS background declaration, or switch to the Tailwind tab for a utility class.
About This Gradient Generator
CSS gradients are images generated by the browser: linear-gradient paints along a straight line, radial-gradient radiates from a center point, and conic-gradient sweeps around a center like a color wheel. Each accepts two or more color stops with optional positions. Writing them by hand — especially with many stops or rgba transparency — is slow and error-prone.
This generator renders your gradient live as you drag color stops along the bar, spin the angle, or move the center point. Start from one of 10 curated presets (sunset, ocean, candy, rainbow…) and make it yours. The output is a single background declaration that works in every modern browser; the Tailwind tab wraps the same gradient in arbitrary-value syntax for utility-first workflows.
Gradient FAQ
How many color stops can I add?
Up to 8 stops. Click anywhere on the gradient bar to insert a new stop at that position — its color is automatically interpolated from its neighbors. Drag stops to reposition, select one to edit its color and opacity, and delete it with the “Delete stop” button (a minimum of 2 stops is kept).
What is the difference between linear, radial and conic gradients?
Linear gradients transition colors along a straight line at a given angle. Radial gradients spread outward from a center point in a circle or ellipse. Conic gradients rotate colors around a center point (like a pie chart or color wheel) and support a “from” angle.
How do I make a gradient with transparency?
Select any color stop and lower its opacity slider. The generator outputs rgba() colors for that stop, so you can fade to transparent or blend the gradient over a background image or color underneath.
How do I reverse the direction of the colors?
Click the “Reverse” button — it mirrors every stop position (0% becomes 100%, etc.), flipping the gradient without changing the angle. You can also rotate the angle slider by 180° for linear gradients.
Can I use this as a background-image instead of background?
Yes. The generated value (linear-gradient(...), radial-gradient(...) or conic-gradient(...)) is an