CSS Gradient
Build linear and radial CSS gradients with live preview. Copy the CSS in one click.
Runs entirely in your browser — files never uploaded
Type
Color stops
- 0%
- 100%
CSS
background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);
How to use CSS Gradient
- 1. Choose linear or radial. Linear flows in a direction; radial fans out from the center.
- 2. Edit colors and stops. Add as many color stops as you like. Drag the position slider to control the blend.
- 3. Tune the angle or shape. Linear: pick the angle in degrees. Radial: ellipse or circle.
- 4. Copy the CSS. One click puts the full background rule on your clipboard.
FAQ
Are these gradients supported in all browsers?
Yes — both linear-gradient() and radial-gradient() are supported in every modern browser without prefixes.
Can I export to PNG or JPG?
Not from this tool — the output is pure CSS. Take a screenshot of the preview if you need a raster.
Why doesn't my radial gradient look centered?
By default radial-gradient centers itself in the element. The 2:1 preview here is wide so ellipses look stretched. Use 'circle' for a perfect circular blend regardless of element shape.
Related tools
Advertisement