Gradient Generator
Create stunning CSS gradients
What is this tool?
Creates a CSS gradient between two or more colors, with a live preview, and generates the corresponding CSS code to copy directly into a project.
How to use it
Choose your colors and gradient direction, add more color stops if you want a richer gradient, adjust until the preview looks right, and copy the generated CSS.
Gradients with colors that are too close in hue can look muddy rather than smooth — a gradient between two genuinely different hues (rather than two shades of the same color) often reads as more intentional and polished. With three or more colors, keep an eye on the middle stops especially -- an unplanned color sitting between two others can create a muddy transition zone that neither endpoint color would produce alone.
Watch: Gradient Generator in Action
Watch on YouTubePlays on YouTube (counts toward our @freedailypro channel).
Next: Box Shadow Generator
Pick a consistent shadow style
Frequently asked questions
More from Design & Color: