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.
More from Design & Color:
Advertisement