CSS Gradient Generator – 2 & 3 Color
Generate a 2- or 3-Color CSS Gradient
Design soft linear or radial CSS background gradients with two or three colors, tweak directions, and copy ready-to-use code for your UI in one click.
Gradient options
Choose gradient type, orientation, and colors.
Modes
Choose gradient type
Choose orientation
Orientation applies to linear gradients.
Pick your colors
Preview
Live gradient preview
Live gradient preview
CSS code
Copy the background-image property, a class, or inline style snippet.
Copied!