CSS Gradient Generator
Add color stops, adjust the angle, and copy ready-to-use CSS for your gradient.
Color Stops
background: linear-gradient(90deg, #4f46e5 0%, #06b6d4 50%, #22c55e 100%);How to use this tool
Toggle between Linear and Radial, and for linear gradients drag the angle slider to set the direction in degrees. Each color stop has its own color swatch and position slider — drag a stop from 0% to 100% along the gradient, or remove it with the trash icon (at least two stops must remain). Click Add Stop to add up to six stops for more complex transitions. The preview and the generated CSS update live, and the copy icon next to the code copies it instantly.
Related Tools
Related Blog Posts
HEX, RGB, and HSL Explained: A Developer's Guide to Color Formats
The three most common ways to represent color in CSS, plus alpha transparency, and when to reach for each format.
Read more10 CSS Gradient Ideas You Can Copy and Customize
Ready-to-use linear and radial gradient combinations for buttons, backgrounds, and cards, plus an accessibility tip.
Read moreBest Free Tools Every Developer Should Bookmark
Five browser-based utilities worth bookmarking for everyday development tasks, and what each one is actually good for.
Read more