CSS Gradient Generator
Create beautiful CSS gradients visually. Free, no signup.
How It Works
Pick two colors, choose a gradient type, and adjust the angle. The preview and CSS code update in real time. Click Copy to use the gradient in your project.
Common Gradient Angles
For a linear gradient, the angle sets the direction the colors travel. These are the most useful reference points:
| Angle | Direction |
|---|---|
| 0° | Bottom to top |
| 90° | Left to right |
| 180° | Top to bottom |
| 270° | Right to left |
| 45° | Bottom-left to top-right |
Linear vs Radial Gradients
A linear gradient blends colors along a straight line at the angle you choose, which suits backgrounds, buttons, and banners. A radial gradient blends outward from the center in a circle, giving a soft spotlight or glow effect. Switch between them with the Type dropdown and compare the preview.
Frequently Asked Questions
How do I create a CSS gradient?
Choose Linear or Radial, pick your two colors, and for a linear gradient drag the angle slider. The preview and the CSS code update in real time, then click Copy to grab the code.
What CSS does it generate?
It outputs a background declaration. A linear gradient looks like background: linear-gradient(90deg, #3b82f6, #8b5cf6); and a radial gradient looks like background: radial-gradient(circle, #3b82f6, #8b5cf6);. Paste it straight into your stylesheet.
Can I set the angle of the gradient?
Yes, for linear gradients. The angle slider runs from 0 to 360 degrees, where 90 degrees goes left to right and 180 degrees goes top to bottom. Radial gradients use a circle shape and have no angle.
How many colors can I use?
This generator blends two colors into a smooth gradient. Set Color 1 and Color 2 with the color pickers to control the start and end of the blend.
Is the tool free and private?
Yes. It is completely free with no signup, and the gradient is generated entirely in your browser. Nothing you pick is uploaded to or stored on a server.