CSS Gradient
Generator
Build beautiful linear, radial, and conic gradients visually. Add colour stops, adjust angles, and copy production-ready CSS in one click.
Linear Gradient
Goes in a straight line from one colour to another. Use an angle (0°–360°) or direction keywords. background: linear-gradient(135deg, #f00, #00f)
Radial Gradient
Radiates outward from a centre point. Choose circle or ellipse shape. Great for spotlight effects and glowing backgrounds. background: radial-gradient(circle, #f00, #00f)
Conic Gradient
Rotates colours around a centre point like a pie chart. Brilliant for creating colour wheels and pie chart visuals with pure CSS. background: conic-gradient(#f00, #0f0, #00f)
Colour Stops
You can control exactly where each colour begins and ends using percentage positions. Multiple stops enable complex multi-colour gradients. Stops default to even spacing if no position is set.
CSS Gradients: A Complete Guide
CSS gradients are one of the most powerful visual tools available to web designers. They let you create smooth transitions between colors without using image files, reducing page weight and improving scalability. Gradients render perfectly at any size, on any screen density, and can be animated and manipulated with CSS — something impossible with raster images.
Types of CSS Gradients
Linear gradients transition colors along a straight line at any angle you specify. linear-gradient(135deg, #667eea, #764ba2) creates a diagonal gradient from blue-purple to deep purple. Radial gradients radiate outward from a central point. radial-gradient(circle, #f093fb, #f5576c) creates a circular gradient from pink to coral. Conic gradients sweep around a center point like a color wheel.
Advanced Gradient Techniques
Hard stops create sharp color transitions rather than smooth fades: linear-gradient(90deg, #red 50%, blue 50%) creates a half-red, half-blue split. Multiple color stops give you full control over where each transition occurs. Layering multiple backgrounds with transparency creates mesh gradients and complex visual effects. Use the generator above to experiment visually and copy the production-ready CSS.
background or background-image on any element. Gradients can also be used in border-image, mask-image, and even list-style-image. They work anywhere an image value is accepted in CSS.background, then add -webkit-background-clip: text and -webkit-text-fill-color: transparent. This clips the background to the text shape, revealing the gradient through the letters.background: linear-gradient(rgba(0,0,0,0.5), transparent), url('image.jpg'). The gradient sits on top of the image, creating a darkening overlay effect common for hero sections.Build beautiful linear and radial gradients visually and copy the CSS in one click.