Color Tools
CSS Gradient Generator
Create CSS linear gradients with a live preview and copy the CSS output.
Color 1
Color 2
CSS Output
About this tool
CSS linear gradients transition smoothly between colors along a straight line. They are used for backgrounds, buttons, hero sections, overlays, and decorative elements. The direction can be specified as a keyword (to right, to bottom) or as a degree angle (0deg points up, 90deg points right, 180deg points down). Radial and conic gradients are also possible in CSS but not covered here.
Frequently asked questions
How do I add more than two colors?
Add additional color stops separated by commas: linear-gradient(to right, #color1, #color2, #color3). Each stop can optionally include a percentage position: linear-gradient(to right, red 0%, blue 50%, green 100%).
Related tools