Beautiful gradients without the guesswork
Pick a gradient type — linear, radial or conic — then set the angle or center and add up to 8 color stops, each with its own position. The large preview updates as you drag, and the CSS below is always ready to copy, including a solid fallback color.
Start from presets like Sunset, Ocean and Aurora, or hit Random for inspiration. Switch on gradient text to fill a heading with the gradient (using background-clip: text), and copy a ready-made Tailwind CSS arbitrary-value class if that's your stack.
How to make a CSS gradient
- 1
Choose the type
Linear, radial or conic.
- 2
Set the direction or center
Angle slider, arrow shortcuts or position.
- 3
Adjust the colors
Add, remove and move color stops.
- 4
Copy the code
CSS or a Tailwind class.
Key features
Three gradient types
Linear, radial and conic.
Up to 8 color stops
With precise positions.
Gradient text
background-clip: text code included.
Tailwind output
Arbitrary-value class ready to paste.
Common uses
- Hero sections: Create eye-catching page backgrounds.
- Buttons and badges: Add depth to UI elements.
- Headings: Make standout gradient text.
Tips and good to know
- Place two stops at the same position to create a hard edge instead of a blend, great for stripes.
- Convert brand colors between formats first with the Color Code Converter.
Frequently asked questions
Do CSS gradients work in all browsers?
Yes. Linear, radial and conic gradients are supported by every current browser without prefixes.
What's the difference between linear, radial and conic?
Linear blends along a straight line, radial spreads out from a center point, and conic sweeps around a center like a color wheel.
How do I make gradient text?
Turn on Gradient text. The CSS sets the gradient as the background, clips it to the text and makes the text color transparent.