Build linear, radial, and conic CSS gradients visually. Add stops, adjust angle, copy the CSS code with one click.
Linear gradients transition colours along a straight line at a specified angle. 0deg goes bottom to top; 90deg goes left to right; 135deg goes diagonal. Linear gradients are the most widely used type in web design — for backgrounds, buttons, cards, and hero sections.
Radial gradients radiate outward from a centre point. The default shape is an ellipse matching the container's aspect ratio. Use circle to force a circular gradient regardless of container size. Radial gradients are ideal for spotlight effects, glows, and depth cues.
Conic gradients rotate colours around a centre point — like a pie chart. The start angle (from keyword) rotates the entire gradient. Conic gradients are perfect for pie charts (with hard colour stops), colour wheels, and decorative starburst patterns.
All three gradient types are supported in Chrome 26+, Firefox 16+, Safari 7+, and Edge 12+. For maximum compatibility with very old browsers, include a -webkit- prefixed version (generated automatically by this tool). Internet Explorer 11 supports linear and radial gradients but not conic gradients.
CSS gradients are rendered by the GPU and are extremely efficient — far more so than gradient images. Use CSS gradients instead of background images for all gradient effects. Avoid animating gradient colour values with CSS transitions — browsers must recalculate and repaint the gradient every frame. Instead, animate opacity on a pseudo-element with a different gradient, or use background-position on a wider gradient background.