Choose a type
Pick a directional linear gradient or a radial gradient spreading from the center.
FREE CSS GRADIENT GENERATOR
Free CSS Gradient Generator
Choose colors and positions to generate linear-gradient or radial-gradient CSS instantly.
Your input and results are never sent to or stored on a server.
- 1Set type and colors
- 2Preview gradient
- 3Copy CSS
1 · Set type and colors
Set up your gradient
2 · Preview gradient
Generated result
Gradient preview
Uses opaque sRGB HEX colors and percentage stops. The result is CSS code, not an image file.
Free CSS background guide
Build a smooth background with color stops
Generate linear and radial gradients for free with no account or installation.Adjust colors and stops
Set two to five colors and positions from 0% to 100%.
Copy the CSS
Check the preview and paste the finished background declaration into your stylesheet.
Understanding CSS gradients
The browser fills the space between stops
CSS renders scalable color transitions without an image file.
Linear gradient
An angle controls the straight direction of the color flow.
Radial gradient
Circle or ellipse colors spread outward from the center.
One CSS line
Paste the finished background declaration into your styles.
FREE CSS GRADIENT GENERATOR FAQ
CSS gradient generator FAQ
Learn about free use, color stops, and supported output.1Is the gradient generator free?
Yes. It is free with no account and no usage-count limit.
2How many colors can I add?
You can use between two and five color stops.
3Can I make linear and radial gradients?
Yes. It supports angled linear gradients and centered circle or ellipse radial gradients.
4Can I download an image?
This version produces responsive CSS background code rather than an image file.