Create beautiful CSS gradients with our visual gradient builder. Support for linear, radial, and conic gradients. Add and customize color stops, control direction and position, browse preset gradients, and copy production-ready CSS code instantly -- all client-side in your browser.
Create gradients visually with an intuitive interface. Pick colors with color pickers, adjust stop positions with sliders, and see your gradient update in real time as you make changes.
Support for linear, radial, and conic gradients. Linear gradients flow in a straight line at any angle. Radial gradients radiate from a center point. Conic gradients sweep around like a color wheel.
Add up to 8 color stops to create complex multi-color gradients. Each stop has its own color picker and position slider. Remove stops or rearrange them to achieve the perfect look.
Get copy-paste-ready CSS code with vendor prefixes for maximum browser compatibility. Click the Copy button to grab the code and paste it directly into your stylesheets.
CSS gradients are smooth transitions between two or more colors, rendered as images by the browser. Unlike static image files, CSS gradients are resolution-independent, scale perfectly on any screen size, and can be customized with code. They are widely used for backgrounds, buttons, borders, and creative UI effects.
Linear gradients transition colors along a straight line at a specified angle. A 0-degree gradient flows from bottom to top, 90 degrees flows from left to right, 180 degrees flows from top to bottom, and 270 degrees flows from right to left. You can use any angle from 0 to 360 degrees. Linear gradients are the most common type and are perfect for directional backgrounds, hero sections, and subtle color overlays.
Radial gradients radiate outward from a center point in a circular or elliptical pattern. You can control the starting position (center, top, bottom, left, right, or any corner) and the shape (circle or ellipse). Radial gradients are ideal for spotlight effects, vignettes, glows, and backgrounds that draw the eye to a focal point.
Conic gradients sweep colors around a center point like the hands of a clock. They start at a specified angle and rotate 360 degrees around the center. Conic gradients are perfect for pie charts, color wheels, loading spinners, and creative geometric patterns. They are less common than linear or radial but offer unique visual possibilities.
Color stops define which colors appear at which positions along the gradient. Each stop has a color and a position (0-100%). A two-stop gradient creates a simple fade between two colors. Adding more stops creates multi-color transitions. You can place stops anywhere along the gradient path to control where colors blend. Stops can even share the same position to create hard color boundaries instead of smooth transitions.
Select the gradient type (linear, radial, or conic) from the dropdown. Add color stops by clicking the Add Color Stop button. For each stop, choose a color using the color picker and adjust the position with the slider or number input. For linear gradients, set the angle using the angle slider. For radial and conic gradients, choose the position from the dropdown. The preview updates in real time as you make changes. When you are satisfied, click Copy CSS to copy the code to your clipboard. You can also click any preset gradient to load a pre-configured gradient and customize it to fit your design.
-webkit- vendor prefixes for maximum browser compatibility. All modern browsers support CSS gradients. Copy the CSS code and paste it directly into your stylesheets. The gradients work in all major browsers including Chrome, Firefox, Safari, Edge, and mobile browsers.
Check out our other free developer tools. Convert colors, generate box shadows, format code, and more -- all from your browser with no sign-up required.
Color Converter →