CSS Gradient Generator: Linear, Radial & Conic
Free CSS gradient generator. Create linear, radial and conic gradients, pick from presets, then copy the CSS or Tailwind class or download a PNG wallpaper.
How to use this CSS gradient generator
Pick a gradient type, set the angle or center, and adjust the colors: drag each color’s slider to move it along the gradient, add up to 8 colors, or start from a preset. The preview updates live. Copy the CSS or the Tailwind class, or download the gradient as a PNG wallpaper in HD, 4K or phone size.
Linear gradient in CSS
Colors blend along a straight line. The angle sets the direction: 0deg goes bottom to top, 90deg left to right.
.gradient {
background: linear-gradient(135deg, #4776e6 0%, #8e54e9 100%);
}Radial gradient in CSS
Colors spread outward from a center point, as a circle or an ellipse. Move the center with at.
.gradient {
background: radial-gradient(circle at center, #4facfe 0%, #00f2fe 100%);
}Conic gradient in CSS
Colors rotate around a center point, like a color wheel. Use hard stops to make pie charts.
.pie {
border-radius: 50%;
background: conic-gradient(#4776e6 0% 25%, #8e54e9 25% 100%);
}Gradient text in CSS
Clip the gradient to the text and make the text color transparent:
.gradient-text {
background: linear-gradient(135deg, #4776e6 0%, #8e54e9 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}FAQ
Do CSS gradients work in all browsers?
Yes. Linear, radial and conic gradients work in all modern browsers. The generated code also includes a solid background color as a fallback.
Can I use the gradient in Tailwind CSS?
Yes. Copy the Tailwind class. It uses an arbitrary value, like bg-[linear-gradient(...)], and works in Tailwind v3 and v4.
Can I download the gradient as an image?
Yes. Choose a size and click Download PNG to get a wallpaper in HD, QHD, 4K, phone or square format.
Need colors for your gradient? Browse shades of blue, shades of purple and pastel colors. More free tools: CSS Button Generator, Glassmorphism Generator and Border Radius Generator.