Create beautiful CSS gradients visually. Supports linear and radial gradients, multiple color stops, angle control, and a preset gallery. Copy the CSS code with one click.
CSS gradients are one of the most powerful design tools available to web developers. They allow you to create smooth transitions between two or more colors entirely in CSS, with no image files required. This results in faster page loads, perfect scaling at any resolution, and gradients that adapt dynamically to element sizes.
A linear gradient transitions colors along a straight line. The linear-gradient() function takes an angle or direction followed by color stops. The angle controls the direction: 0deg is bottom-to-top, 90deg is left-to-right, 180deg is top-to-bottom. You can create subtle two-color gradients for backgrounds or dramatic multi-stop gradients for hero sections, buttons, and decorative elements.
Radial gradients emanate from a central point and spread outward in a circular or elliptical pattern. The radial-gradient() function gives you control over the shape (circle or ellipse), the size (closest-side, farthest-corner, etc.), and the position of the center point. Radial gradients are commonly used for spotlight effects, vignettes, and circular badge backgrounds.
Conic gradients are defined around a center point, with colors sweeping around the circumference like the hands of a clock. The conic-gradient() function is newer but widely supported in modern browsers. It's perfect for pie charts, color wheels, and circular progress indicators — all achievable with CSS alone, no JavaScript or SVG required.
Color stops define where each color appears within the gradient. You can specify positions as percentages (0% to 100%) or absolute values. Multiple stops allow you to create complex multi-color gradients, hard color transitions (by placing two stops at the same position), or gradients that hold a color solid for a portion before transitioning.
CSS gradients are hardware-accelerated and render faster than gradient images. They're supported in all modern browsers and have been for over a decade. Using CSS gradients instead of background images reduces HTTP requests, eliminates image optimization overhead, and makes your design system more maintainable — change a gradient by editing a single CSS value rather than regenerating and re-uploading an image.
For professional-looking gradients, use analogous colors (adjacent on the color wheel) for harmonious blends. Avoid high-saturation color combinations that create grey or muddy midpoints — this is called "gradient grey" and happens because colors travel through desaturated space in RGB. Adding a midpoint stop with a more saturated hue can fix this. Tools like this generator let you experiment visually until the result looks exactly right.