Generate CSS gradients visually. Linear and radial modes with 3 color stops.
background: linear-gradient(135deg, #22d3ee, #a78bfa, #f472b6);CSS gradients create smooth transitions between colors without using images. They render at any resolution, scale perfectly on all devices, and are significantly faster to load than gradient image files. Modern browsers support both linear and radial gradients.
Linear gradients flow in a straight line at a specified angle (0° = bottom to top, 90° = left to right, 135° = diagonal). Radial gradients radiate outward from a center point in a circular or elliptical pattern. Both types support multiple color stops for complex effects.
Use gradients for hero backgrounds, button hover effects, card overlays, and text highlighting. Keep color stops subtle for professional designs. Always test gradients on both light and dark backgrounds to ensure sufficient contrast and readability.
Linear gradients flow in a straight line at a specified angle — 0° goes bottom to top, 90° goes left to right, and 135° creates a diagonal. Radial gradients radiate outward from a center point in a circular pattern. Linear gradients are more common for backgrounds, while radial gradients create spotlight and depth effects.
CSS gradients can technically have unlimited color stops, but 2-4 stops produce the best visual results. This tool supports 3 color stops, which is the sweet spot for creating rich gradients without overwhelming the design. For more complex gradients, you can edit the generated CSS code directly.
CSS gradients are rendered by the browser GPU and have virtually zero performance impact compared to gradient image files. They scale perfectly at any resolution (including Retina displays), require no HTTP requests, and add only a few bytes to your CSS. Always prefer CSS gradients over gradient PNG or JPG images.
Complementary colors (opposite on the color wheel) create vibrant gradients. Analogous colors (adjacent on the wheel) create harmonious transitions. For professional designs, use subtle gradients with colors that are close in hue but vary in lightness. Click Random to discover unexpected combinations.