CSS Gradient Generator
// Create beautiful CSS gradients visually
%
%
background: linear-gradient(90deg, #06b6d4 0%, #8b5cf6 100%);
#About CSS Gradient Generator
Free online CSS gradient generator. Design linear and radial gradients with a visual editor and copy the CSS code. This tool runs entirely in your browser — your data is never sent to a server. Just paste your input, get instant results, and copy with one click. No sign-up or installation required.
#FAQ
How do I create a CSS gradient background? ▾
Use the visual editor to pick your start and end colors, choose a direction or angle, and add additional color stops as needed. The tool generates the CSS linear-gradient or radial-gradient code you can copy directly into your stylesheet.
What is the difference between linear and radial CSS gradients? ▾
A linear gradient transitions colors along a straight line in a specified direction, while a radial gradient radiates colors outward from a central point in a circular or elliptical shape.
</> Embed this tool ▾
Copy this code to embed the tool on your website. Adjust the height to fit your layout.
<iframe src="https://www.browserutils.dev/embed/css-gradient-generator" width="100%" height="500" frameborder="0" title="CSS Gradient Generator"></iframe>