CSS Gradient Generator
This gradient generator builds linear, radial, and conic CSS gradients visually, with 2 to 8 color stops. Copy CSS or Tailwind output instantly.
Your heading here
How to use this generator
- Choose Linear, Radial, or Conic from the tabs above.
- Adjust each color stop's color and position, or add up to 8 stops total with Add stop.
- Set the angle (Linear/Conic) or the shape and center position (Radial).
- Copy the output that matches your workflow — raw CSS value, a full declaration with a solid-color fallback, or a Tailwind arbitrary-value class.
Linear, radial, and conic — when to use each
Linear transitions colors along a straight line at a chosen angle — the most common gradient type, good for backgrounds and buttons. Radial transitions outward from a center point, useful for spotlight effects or soft vignettes. Conic sweeps colors around a center point like a color wheel, useful for pie-chart-style visuals or unusual background effects that linear and radial can't produce.
Frequently Asked Questions
What's the difference between linear, radial, and conic gradients?
Linear transitions along a straight line at an angle. Radial transitions outward from a center point. Conic sweeps around a center point like a color wheel.
Why is the angle control disabled for radial gradients?
Radial gradients radiate outward from a center point in all directions at once, so a single angle doesn't apply — shape and center position control the effect instead.
Can I use this gradient as a background for text?
Yes, using background-clip: text together with color: transparent on the text element, with the gradient set as its background.
Does this work in all browsers?
Linear and radial gradients have very broad support across modern browsers. Conic gradients are supported in all current evergreen browsers but are the newest of the three, so verify support if you need to target older browser versions specifically.
Sources
- CSS
linear-gradient(),radial-gradient(), andconic-gradient()syntax — MDN CSS gradient reference