---
title: Mesh Gradient Generator — CSS & PNG Export
url: https://varstatt.com/toolkit/mesh
description: Create beautiful mesh gradients with custom colors and positions. Export as CSS background-image or PNG at custom resolution.
section: Developer Toolkit (https://varstatt.com/toolkit)
tags: design
related: Color (https://varstatt.com/toolkit/color), Mesh (https://varstatt.com/toolkit/mesh), Text Gradient (https://varstatt.com/toolkit/text-gradient)
---
# Mesh Gradient Generator

Create beautiful mesh gradients with custom colors and positions. Export as CSS background-image or PNG at custom resolution.

## How It Works

1. **Add color points** — Use the slider to set 2-6 color points. Each creates a radial gradient layer.
2. **Customize** — Pick colors, drag points on the preview to reposition, and adjust softness for blending.
3. **Export** — Copy the CSS code for your stylesheet, or download as a PNG image at your chosen resolution.

## FAQ

### How do mesh gradients work?

They layer multiple radial-gradient() CSS functions at different positions, creating organic, flowing color blends.

### Can I use the CSS in production?

Absolutely. The generated CSS uses standard background-image with radial-gradient(), supported by all modern browsers.

### What PNG sizes are available?

Preset sizes: 1920×1080, 1080×1080, 1080×1920. You can also set custom dimensions. For geometric patterns instead of gradients, try the [CSS cover art generator](https://varstatt.com/toolkit/css-covers).

## Usage

This tool runs entirely in the browser — visit the URL above to use it.

## Related Tools

- [Color](https://varstatt.com/toolkit/color)
- [Mesh](https://varstatt.com/toolkit/mesh)
- [Text Gradient](https://varstatt.com/toolkit/text-gradient)