CSS Gradient Generator
Visually generate linear-gradient / radial-gradient CSS code
How to Use
- Select gradient type
Choose "linear" or "radial" from the toolbar. For linear gradients, you can also set the angle.
- Configure color stops
Pick colors using the toolbar color pickers and add stops with "Add Stop". You can also paste existing CSS gradient syntax into the input.
- Copy the CSS code
Review the live preview and use the "Copy" button to copy the generated CSS code.
CSS Gradient Generator Examples
Linear gradient
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);Creates a diagonal gradient with two color stops.
Radial gradient
background: radial-gradient(circle, #ff6b6b 0%, #556270 100%);Creates a circular gradient expanding from the center.
Features
- Linear-gradient and radial-gradient support
- Customizable angle/direction for linear gradients
- Add, remove, and edit color stops
- Real-time gradient preview
- Parse and edit existing CSS gradient syntax
- One-click copy of CSS code
- Local processing (your input is not sent to servers)
FAQ
How many color stops can I add?
There is no CSS spec limit. This tool allows you to add multiple color stops for practical use.
Does it support conic-gradient?
Currently linear-gradient and radial-gradient are supported. Conic-gradient support is planned for a future update.
Is my data sent to a server?
No. All processing happens locally in your browser via JavaScript. No data is ever transmitted externally.