Color Stops
CSS Output
Presets
Click a theme to instantly load a pre-configured gradient.
How It Works & CSS Syntax
This tool visually constructs standard CSS `background-image` properties using gradient functions. As you add colors and change positions, the generator calculates the precise syntax needed for modern browsers.
Linear Gradients
A linear gradient transitions colors along a straight line. The syntax is:
linear-gradient(angle, color1 position1, color2 position2, ...)
The angle determines the direction (e.g., 90deg goes left to right). The position determines where the color reaches its purest form (0% to 100%).
Radial Gradients
A radial gradient transitions colors outward from a central point. The syntax is:
radial-gradient(shape at position, color1 pos1, color2 pos2, ...)
The shape can be a circle or an ellipse. This tool defaults the position to the center of the element.
Conic Gradients
A conic gradient transitions colors rotated around a central point, like a pie chart. The syntax is:
conic-gradient(from angle at center, color1 pos1, color2 pos2, ...)
Conic gradients are excellent for creating color wheels, pie charts, and complex angular patterns.