Generate CSS linear, radial, and conic gradients visually. Copy the ready-to-use CSS code for any gradient with multiple color stops.
CSS Gradient Generator
Color Stops
Preset Gradients
Ad · 336x280
CSS Gradients: Linear, Radial, and Conic
CSS gradients let you create smooth color transitions without images — they're performant, resolution-independent, and fully customizable with CSS alone. Modern browsers support three types: linear-gradient, radial-gradient, and conic-gradient.
Add as many colors as you want: linear-gradient(to right, red 0%, yellow 50%, green 100%). Without position values, stops are evenly distributed. Add percentage positions to control where each color sits in the gradient.
Frequently Asked Questions
Use -webkit-background-clip: text: .gradient-text { background: linear-gradient(to right, #667eea, #764ba2); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }. This clips the gradient to the text shape. Works in all modern browsers. The -webkit- prefix is still needed for Safari compatibility despite being a standard property now.
CSS transitions/animations can't directly animate gradient stops (they're not animatable properties). Workarounds: (1) Animate background-position on a large gradient (GPU-accelerated). (2) Use @keyframes to animate via CSS custom properties with Houdini (limited support). (3) For smooth animation, use JavaScript to update gradient colors on each frame with requestAnimationFrame. The background-position trick is the most compatible.
Layer gradients over images with multiple backgrounds: background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.7)), url(image.jpg); The gradient renders on top, creating a dark overlay at the bottom. Use rgba() for transparency. Common use: text-over-image hero sections with a dark gradient ensuring text legibility.
Linear gradients transition along a straight line (left to right, top to bottom, or any angle). Radial gradients emanate from a central point outward in a circle or ellipse shape. Use linear for directional backgrounds and hero sections. Use radial for spotlight effects, glowing highlights, or circular backgrounds. Conic gradients sweep around a point, useful for pie charts and color wheels.