Build linear, radial and conic CSS gradients visually with draggable color stops.
Loading tool
About CSS Gradient Generator
Build linear-gradient, radial-gradient and conic-gradient backgrounds visually. Drag color stops along a bar (or move them with the arrow keys), click the bar to add a stop, and set the angle, radial shape, center position and repeating mode. Stops accept any CSS color including transparency. The result is copy-ready as a background-image declaration and as a Tailwind arbitrary-value class, with presets to start from.
Common uses
- Create a hero or button background gradient
- Build striped backgrounds with repeating-linear-gradient
- Make a conic gradient for a pie or color-wheel effect
- Get a gradient as a Tailwind bg-[...] class
FAQ
- What is the difference between linear, radial and conic gradients?
- A linear gradient changes color along a straight line at an angle. A radial gradient spreads outward from a center point as a circle or ellipse. A conic gradient sweeps colors around a center point, like a pie chart.
- How do I make hard color stripes?
- Give two adjacent stops the same position, for example red 50% followed by blue 50%. With a repeating gradient and stops ending below 100%, the pattern tiles into stripes.
- Which way does 0deg point in linear-gradient?
- 0deg points to the top, and angles increase clockwise, so 90deg goes left to right and 180deg (the default) goes top to bottom.