Gradient Generator – Create CSS Gradients Online
Gradient Generator
Create beautiful CSS gradients and export them instantly.
Free Online CSS Gradient Generator
Create custom linear and radial CSS gradients with multiple color stops. Adjust the angle or radial shape, preview changes instantly, copy the generated CSS or gradient value, and export the gradient as a PNG image.
How to Use the Gradient Generator
- Choose a Linear or Radial gradient.
- For a linear gradient, adjust the angle from 0° to 360°. For a radial gradient, choose ellipse or circle.
- Edit the colors and positions of the color stops, or add more colors.
- Use a preset, reverse the colors or generate a random gradient if desired.
- Copy the CSS or gradient value, or download the result as a PNG image.
Customize Your CSS Gradient
The generator supports between two and five color stops, with each stop positioned from 0% to 100%. Linear gradients include a customizable angle, while radial gradients support ellipse and circle shapes. Eight built-in presets are available, and the live preview updates as the gradient changes.
Frequently Asked Questions
Can I create both linear and radial gradients?
Yes. Select Linear Gradient or Radial Gradient from the Gradient Type menu.
How many colors can I add?
The generator keeps at least two color stops and allows up to five color stops.
Can I change the position of each color?
Yes. Each color stop has a position value from 0% to 100%.
Can I copy the generated CSS?
Yes. You can copy the complete CSS background declaration or copy only the generated gradient value.
Can I download the gradient as an image?
Yes. The tool can render the current gradient and download it as a PNG image.