Softonic

Mesh Gradient Generator

Create a smooth multi-color background from 4, 6 or 9 movable points. Choose each color, drag points around the canvas, try a curated random palette, and export the result as SVG or PNG. You can also copy a CSS approximation made from layered radial gradients. Your project stays in this browser tab while you work.

How to create a mesh-style gradient

  1. 1

    Choose the grid

    Start with 4, 6 or 9 control points. More points create more distinct color regions.

  2. 2

    Choose the colors

    Use the color picker for each point. The editor stores six-digit HEX colors.

  3. 3

    Move each point

    Drag a point with a pointer, enter its horizontal and vertical position, or use the arrow keys.

  4. 4

    Choose the output size

    Select a landscape, widescreen or square size for the SVG and PNG files.

  5. 5

    Export the design

    Download PNG or SVG, or copy the layered radial-gradient CSS approximation.

How the three outputs are rendered

  • PNG uses the same distance-weighted pixel interpolation as the canvas preview. If the selected output has a different aspect ratio, the same relative points are rendered into the new dimensions.
  • SVG positions overlapping radial gradients at the same control points. It stays sharp when scaled.
  • CSS creates one radial-gradient() layer per point over a solid base color. It needs no separate image asset.

SVG and CSS use the same project data, but they are lightweight mesh-style approximations rather than native bicubic gradient meshes. Their pixels will not be identical to the PNG preview.

Palette guidance

  • Related hues usually produce gentle transitions.
  • Contrasting hues create stronger boundaries between color regions.
  • The random palettes are starting points, not readability guarantees.
  • Test the contrast of any text, icons or controls placed over the finished background.

Positioning the control points

Drag a numbered point directly on the preview, or focus it and use the arrow keys. Hold Shift with an arrow key to move by five percentage points. The numeric horizontal and vertical fields provide another precise input method.

Points can reach the edge of the canvas. Moving several points close together concentrates their colors in one region, while spreading them apart gives each color more space.

Practical uses

  • Hero backgrounds and section dividers.
  • Social cards and video thumbnails.
  • Presentation and illustration backdrops.
  • App splash screens and decorative panels.

The PNG is the closest match to the on-screen preview. Use SVG when scaling matters, or CSS when you want an editable background with no separate image file.

Privacy and browser storage

Colors, positions and resolution remain in browser memory and sessionStorage. They are not added to funnel URLs or data sent to our servers. The tool may record that an export action occurred without including any project values.

The project can be restored from sessionStorage for up to six hours while the current browser tab remains open. Closing the tab usually removes it sooner, so download or copy anything you want to keep.

Frequently Asked Questions

They use different rendering methods. PNG uses distance-weighted pixel blending, while SVG and CSS use layered radial gradients. They share the same colors and positions but are not pixel-identical.

Yes. Drag a numbered point with a pointer, use its horizontal and vertical fields, or focus it and press the arrow keys. Hold Shift for larger keyboard movements.

The editor stores colors as six-digit HEX values. Use the color picker, or convert an RGB or HSL color to HEX before entering it.

No. The copied CSS approximates the look by stacking standard radial gradients. It is portable CSS, but it is not a native bicubic gradient mesh.

It can be restored from sessionStorage for up to six hours in the current browser tab. Closing the tab normally removes it sooner. The project is not sent to our servers or added to funnel URLs.

Related Tools

HEX Color Picker

Pick or enter a HEX colour and get RGB, HSL, approximate CMYK, relative luminance and contrast ratios against white and black.

Color Palette Generator

Generate monochromatic, analogous, complementary, triadic or tetradic color palettes from a base HEX color and export copy-ready CSS variables.

ASCII Table Reference

Full ASCII table from 0 to 127 with decimal, hex, octal, binary, standard names and HTML numeric-reference notation, including NUL, LF and DEL.

FPS Counter

Measure browser FPS with requestAnimationFrame, smoothing, min/max frame rate, warnings and an optional graph. Runs locally with no upload or API.

Phone Validator

Validate phone numbers by country, detect the region and type, and normalize valid numbers to E.164, international, national and RFC 3966 formats.

Random Color Palette Generator

Generate random color palettes from 2 to 15 swatches, choose a vibrant, pastel, muted or dark style, then copy HEX codes or CSS variables.