Gradient Generator
Free online CSS gradient generator. Create linear, radial, and conic gradients with live preview. Copy CSS code instantly. Works offline.
About this tool
Create beautiful CSS gradients with an intuitive visual editor. Supports linear, radial, and conic gradient types with multiple color stops. Features include angle control, 10 curated presets, random gradient generation, and one-click CSS code copy. Add, remove, and reorder color stops by dragging. Live preview updates in real-time as you adjust settings.
Details
- Category
- Utilities
- Version
- 1.0.0
- Size
- 24 KB
- Updated
- Jun 2026
Frequently Asked Questions
What gradient types are supported?
Linear, radial, and conic gradients. Each type has its own controls — angle for linear, shape and size for radial, and angle for conic.
How do I add more colors?
Click the "Add Color" button below the color stops. You can add up to 10 color stops. Drag the sliders to reposition them.
Can I use the gradient in Figma?
Yes. Click "Copy SVG" to copy the gradient as a PNG image to your clipboard — paste directly into Figma. If clipboard fails, it downloads an SVG file you can drag into Figma. "Copy to Figma" tries native gradient format.
Can I copy the CSS code?
Yes. The CSS code is displayed at the bottom and updates in real-time. Click the Copy button to copy it to your clipboard.
Is my data sent anywhere?
No. All gradient generation happens locally in your browser. Your last used settings are saved to localStorage for convenience.
