Create stunning static and animated CSS gradients with a live visual editor.
Drag color stops · Choose gradient type · Add animations · Copy code instantly.
Changes update in real time · Switch tabs to see gradient in context
Click any preset to load it into the editor above.
Everything you need to know about CSS Gradients.
A CSS gradient is a smooth transition between two or more colors generated entirely in CSS — no image file needed. Use linear-gradient() for directional transitions, radial-gradient() for circular ones, and conic-gradient() for sweeping color arcs.
Browsers cannot animate gradient color stops directly. The most common technique is animating background-size or background-position with a large oversized gradient. For rotating conic gradients, use requestAnimationFrame in JavaScript to update the gradient string each frame.
linear-gradient() transitions colors along a straight line at any angle. radial-gradient() radiates colors outward from a center point. Use linear for backgrounds and hero sections; use radial for spotlight or orb-style effects.
conic-gradient() sweeps colors around a center point like a clock face — perfect for pie charts, color wheels, and spinning animated backgrounds. It has excellent support in all modern browsers since 2022.