Generators

Mesh Gradient Generator

Position multiple color points to create mesh backgrounds and export SVG, PNG or CSS.

On your deviceFREENo account needed

Guest results are not saved to an account. Sign in before processing to keep results in your private history for 30 days.

ExampleSee sample input and settings

Load the example, adjust the values, then run the tool.

Example input
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="240" viewBox="0 0 400 240"><rect width="400" height="240" rx="30" fill="#7c3aed"/><circle cx="200" cy="120" r="65" fill="#06b6d4"/></svg>
Color
#7c3aed
Color
#06b6d4
Color
#f472b6
Color
#fbbf24
Left
25
Top
30
Left
80
Top
15
Left
70
Top
85
Left
15
Top
90
Blur
50
Width (px)
800
Height (px)
500

Loading…

About this tool

Position multiple color points to create mesh backgrounds and export SVG, PNG or CSS.

Choose your options, process your input, and download or copy the result.