CSS gradient generator
Linear, radial and conic gradients with live preview and copyable CSS.
FreeRuns in your browserNo signupUpdated 2026-10-29
Colour stops
Up to six stops. Stops are sorted by position in the output.
Preview
.hero {
background: #8b5cf6;
background-image: linear-gradient(135deg, #2f6bff 0%, #8b5cf6 100%);
}bg-[linear-gradient(135deg,_#2f6bff_0%,_#8b5cf6_100%)]
About this tool
How it works and how to read the result.
Need this done for you?
Website design & development
Company websites designed and built to win trust and enquiries.
See the serviceWhat it does
This css gradient generator builds linear, radial and conic gradients from up to six colour stops. You set the type, the angle or centre, and the colour and position of each stop, and the preview updates as you go. The output is a ready-to-paste CSS rule with a solid fallback colour, plus the same gradient as a Tailwind arbitrary value for projects that use utility classes. Everything happens in your browser.
How to use it
- Choose Linear, Radial or Conic.
- Drag the angle slider, or for radial and conic gradients pick a shape and a position.
- Edit each stop's colour and its percentage along the line. Add a stop for a three-colour blend; remove one you do not need.
- Copy the CSS block, or the Tailwind class if you prefer.
How to read the result
A linear gradient at 135 degrees from #2f6bff at 0% to #8b5cf6 at 100% produces linear-gradient(135deg, #2f6bff 0%, #8b5cf6 100%). The 135 means the blue starts at the top left corner and the violet finishes at the bottom right. Because the stops are at the extremes, the blend covers the whole box. Move the first stop to 40% and the top left becomes solid blue for the first 40% of the diagonal before the blend begins.
Radial gradients ignore the angle and take a shape and a position instead. circle at top left puts the first colour in that corner and spreads outwards. Conic gradients sweep around a centre point like a pie chart, which is why they are the usual choice for colour wheels and progress rings.
The output includes background: with the last stop's colour before the background-image: line. Old browsers that cannot draw the gradient show that solid colour instead of nothing.
Pair a gradient with a frosted panel from the glassmorphism generator, or talk to us about website design and development if you want the whole page designed.
Questions
Frequently asked.
What does the angle mean in a linear gradient?
Zero degrees points up, so the first colour sits at the bottom and the last at the top. Ninety degrees points right, 180 points down. A diagonal like 135 degrees runs from top left to bottom right. The gradient line passes through the centre of the box.
Why does the middle of my gradient look grey or muddy?
Browsers mix in sRGB by default, and the straight line between two saturated colours passes through a dull region. Add a stop in the middle with a brighter mixed colour, or use the newer in oklch syntax where supported, and the middle stays clean.
Can I use these gradients on text?
Yes. Apply the background-image to the text element, then add background-clip: text and color: transparent. The text acts as a mask over the gradient. Keep a solid fallback colour for browsers that do not support clipping.
Your next move
Like what you see? Tell us about it.
A process that takes too long, a website that undersells you, or an idea ready to take shape. Tell us where you are and we will suggest a useful next step.
India · Working with clients worldwide