CSS Gradient Generator
Create linear and radial CSS gradients visually. Add and drag color stops, set the angle, and see a live preview. Copy the CSS code in one click or save the gradient as a PNG background image in any size.
Type
Shape
Color stops
Click the bar to add a stop. Drag a stop to move it.
Presets
CSS code
How it works
- Choose Linear or Radial and set the angle (or shape).
- Click the bar to add a color stop, drag stops to move them, and change each stop’s color.
- Copy the CSS code, or pick a size and save it as a PNG.
FAQ
Which browsers support CSS gradients?
linear-gradient() and radial-gradient() work in every modern browser without prefixes.
What does the angle mean?
0° goes from bottom to top, 90° from left to right, 180° from top to bottom.
Can I use the PNG as a wallpaper or thumbnail background?
Yes. Pick 1920×1080, 1080×1920 or a custom size and use it freely.