Design in Flowing Color Lab
Make an organic gradient SVG with optional motion. Processing stays in your browser.
Liquid gradient settings
Live preview
Standalone SVG · 1200 × 630 px. Complex SVG filters can be costly on slower devices.
The gradient combines several soft color fields with SVG turbulence and displacement. Enable animation for moving color fields, then copy the markup or save the SVG.
What this tool does
Build an organic SVG background from gradients and distortion filters. SVG stays sharp when scaled, making it useful for headers and decorative sections.
How to use it
- Pick two colors and set the SVG width and height.
- Choose a linear or radial gradient, then adjust density, blend mode, frequency, saturation and blur while watching the preview.
- Enable animation only if you want movement in the saved SVG; copy its markup or download the file.
Understand the controls
- Frequency and density
- Frequency controls the scale of the distorted shapes. Density switches between a simpler and a more layered composition.
- Blend, saturation and blur
- Blend changes how layers interact; saturation intensifies their colors, while blur softens the edges. Angle applies to the linear gradient.
Example
Try a low frequency and moderate blur for a quiet hero background. Increase frequency and switch to complex density when you want smaller, more active forms.
Files and limits
Output is SVG, including animation when selected. Width and height must each be 1–8192 px, with no more than 32 million pixels in total.
Frequently asked questions
What can I download?
A standalone SVG that scales without losing sharpness. Animation is included when the animation switch is on.
How is the liquid effect made?
SVG gradients are distorted with turbulence and displacement filters in your browser.
Can I use the SVG as a website background?
Yes. Download the SVG or copy its markup and use it in your project.