SVG generator for fluid blurred gradient backgrounds
blend mode ↷
Some sample gradient backgrounds generated using this tool ↷
About this SVG gradient background generator
This SVG gradient background generator makes it easy to generate fluid and organic-feeling mesh gradients. You can use the resulting graphics as backgrounds to elements on a page to give a colorful fluid look to page elements.
Behind the scenes, this generator makes use of SVG filters like feTurbulence, feGaussianBlur and feBlend to create the smooth and fluid effect on a SVG gradient.
🎨 If you'd like more fine-grained control over the colors you select for these gradients, I recommend cccolor, a simple HEX, RGB and HSL color picker.
Note that the resulting SVG files, while small in size, will often require a whole lot of graphic processing power to render, especially at large sizes and when the window is resized. If this becomes an issue in your particular use case, I recommend using a tool like rrrasterize to rasterize the resulting SVG graphic to a modern optimized raster format like WebP or AVIF.