Gradient generator
Arrange up to eight gradient color stops and export matching CSS, SVG or PNG. Files and entered content are not sent to or stored on a server.
How to use
Arrange up to eight gradient color stops and export matching CSS, SVG or PNG.
Supported formats & limits
Values / Images → SVG / PNG
Processing stays in this browser. File formats and available memory may limit the result.
Stops are sorted by position. Positions range from 0 to 100%.
Gradient generator User guide
Instructions
- Choose each stop color and percentage position.
- Set direction and add or remove stops while checking the preview.
- Copy CSS or save the gradient as SVG / PNG.
Example
Input / settings
90° · #235c47 0% → #f6f7f3 100%
Result / checks
Left-to-right gradient · CSS / SVG / PNG
Please note
- Stops are sorted by position. Positions range from 0 to 100%.
- 0 degrees points up; 90 degrees points right. Export uses an 800 × 460 canvas.