CSS Gradient Generator
Build a linear or radial CSS gradient visually and copy the code.
What is the CSS Gradient Generator?
This tool lets you build a linear or radial CSS gradient by picking colors and adjusting the angle, then live-previews the result and generates the exact background CSS to paste into your stylesheet.
How to use it
- Choose linear or radial, and set the angle for a linear gradient.
- Add, remove or recolor stops to build the gradient you want.
- Copy the generated CSS directly into your project.
CSS gradients render as vectors rather than images, meaning they scale to any size with no extra file to load and no blurring at large sizes — a genuine performance advantage over a gradient exported as a PNG or JPG background. This tool outputs standard linear-gradient() and radial-gradient() functions, which are supported in every current browser and can be used directly on background, background-image, or even as a mask or border-image source. Multiple color stops let you build anything from a simple two-tone fade to a more complex multi-color transition.
Want the "why" behind this tool? Read Why a CSS Gradient Beats a Gradient Image, Almost Always.