Mesh Gradient Studio
Drag colour points, pick a blend mode, add grain and ripples, then export a PNG, SVG, CSS, a WebM video or an animated background for your website.
Everything is computed in your browser: no image and no setting is sent to a server.
About this tool
This studio makes mesh gradients, the soft blended colour backgrounds you see on websites, slides, wallpapers and social posts. You place colour points on the preview and move them with the mouse, a finger or the keyboard. Three blend modes are available: a deformable grid with bilinear or bicubic interpolation, a point field that glows like the northern lights, and soft blobs over a plain background.
Adjustable grain adds a photographic texture and hides colour banding, while distortion adds waves, a swirl or a liquid feel. Ten ready-made palettes and a random button give you a starting point. You can export a PNG up to 6,000 px per side or in common formats (wallpaper, story, banner, Open Graph), a looping video recorded by your browser, an SVG built with filters, approximate CSS and a tiny animated background snippet to paste into your website.
- Three modes: grid mesh, aurora, soft blobs
- Points you drag with mouse, finger or keyboard
- Grain, saturation, brightness and distortion
- Seamless animated loop and WebM video
- PNG up to 6,000 px and ready-made formats
- SVG, CSS and animated background code
How to use it
- Choose a format above the preview, then a blend mode and a palette.
- Move the points, change their colour and radius, add grain or distortion.
- Turn on the animation for a living background, then record the video in the Motion tab.
- In the Export tab, download the PNG or SVG, or copy the CSS and the embed code.