Back to Tools
Color Gradient Maker
Create and customize beautiful CSS gradients for your web projects. Add color stops, adjust positions, and choose between linear, radial, or conic gradients. Export your gradient as CSS code or download as an image.
Gradient Controls
Customize your gradient properties
°
%
Gradient Preview
Color Stops
CSS Code
Gradient Presets
Popular Gradients
Click on a preset to apply it to your gradient
Vibrant Gradients
Click on a preset to apply it to your gradient
Subtle Gradients
Click on a preset to apply it to your gradient
Radial Gradients
Click on a preset to apply it to your gradient
Conic Gradients
Click on a preset to apply it to your gradient
About CSS Gradients
Linear Gradients
Linear gradients transition colors along a straight line. The angle determines the direction of the gradient. 0° creates a bottom-to-top gradient, 90° creates a left-to-right gradient.
Radial Gradients
Radial gradients transition colors from a central point outward in a circular or elliptical pattern. You can control the position of the center point and the shape of the gradient.
Conic Gradients
Conic gradients transition colors around a center point (rather than radiating from it). They are great for creating pie charts, color wheels, and other circular designs.