Home / CSS gradient generator
CSS gradient generator
Pick two or three colors, set the angle, and copy a ready-to-paste CSS gradient. You can also load a pair from the palette library.
Type
Angle · 90°
Color
CSS code
Load from the library
Click a palette to build a gradient from its primary and accent colors
How gradient CSS works
linear-gradient(angle, color1, color2) transitions from color 1 to color 2 along the given angle; radial-gradient(circle at center, ...) spreads outward from the center. Both are values of the background property, not properties of their own.
Angles start at 0deg pointing up and grow clockwise: 180deg runs top to bottom, 90deg left to right. For finer control add percentage stops, like #1f5f5b 20%.
When the two ends of a gradient are too close in contrast, text on top becomes unreadable. When in doubt, measure it with the contrast checker.