Color Stops
Presets
Build linear, radial, and conic CSS gradients visually. Add color stops, adjust the angle, choose a gradient type, and see a live preview update as you go. Copy the generated CSS with one click — everything runs in your browser, nothing is sent to a server.
A CSS gradient is a smooth transition between two or more colors rendered entirely by the browser — no image file required. Gradients are defined using CSS functions such as linear-gradient(), radial-gradient(), and conic-gradient(), and can be used anywhere an image is expected: backgrounds, borders, masks, and even list markers.
Because they are drawn by the browser at display resolution, gradients scale perfectly on retina screens, load instantly (zero HTTP request), and can be animated or transitioned with CSS. Color stops control exactly where each color starts and ends, giving you precise control over blends, hard lines, and everything in between.
to right, to bottom, or a specific degree like 135degcircle and ellipse shapesat center, at top left, or pixel offsetsfrom keywordrepeating-linear-gradient() tiles the pattern infinitelyrgb(), hsl(), or named0%–100%) or length valuesrgba() or #rrggbbaaCSS gradients are GPU-accelerated in modern browsers and produce zero network requests, making them significantly faster than background images for simple color effects. However, very complex gradients with many stops can cause paint performance issues on low-end devices. For animated gradients, prefer animating background-position on an oversized gradient rather than animating the gradient values directly — browsers can't interpolate gradient functions smoothly without triggering a repaint on every frame.
When targeting older browsers, provide a solid color fallback before the gradient declaration: background: #667eea; background: linear-gradient(...);. Browsers that don't understand the gradient function will use the solid color instead. Modern browsers (Chrome 26+, Firefox 16+, Safari 7+) all support the three gradient types generated by this tool without vendor prefixes.