Mesh gradients are live

Mesh Gradient Generator

Design eye-catching mesh gradients for web design and illustration projects. Randomize, fine-tune color stops, and download your mesh as a ready-to-use image.

PNG · responsive preview
Live mesh previewStop 1 · x 25% · y 30% · size 55%
CSS background
/* Mesh CSS will appear here in the browser */

Mesh controls

Choose a base color and fine-tune each color stop. Drag the numbered handles directly in the preview or use the sliders below.

Edit target

Base background

bg-slate-950

Color stops

Stop 1 position & size

X position25%
Y position30%
Radius55%
Hex values
Base--

How to use

  1. Drag the numbered handles or adjust sliders to place color stops.
  2. Use the Tailwind playground to pick on-brand colors.
  3. Copy the CSS background or download the PNG for your design.

Inspired by Gradienty's mesh gradient tool – rebuilt here as a demo using Tailwind CSS and Framer Motion.