CodeBeautifyCSS Gradient Generator
Pick two colors and a direction to build a linear or radial CSS gradient, with a live preview.
90°
CSS
Copied
Linear gradients transition colors along a straight line at a chosen angle; radial gradients transition outward from a center point. The generated code works in every modern browser with no vendor prefixes needed.
Frequently asked questions
How do I create a CSS gradient online?
Choose linear or radial, pick two colors, and (for linear) set an angle. The preview and CSS code update live — click Copy CSS to grab the result.
Do I need vendor prefixes for this gradient CSS?
No, the linear-gradient() and radial-gradient() functions are supported unprefixed in all current browsers.