Hub CSS Mesh Gradient Generator
🌈

CSS Mesh Gradient Generator

Create organic, multi-colour mesh gradients. Drag the colour points, adjust blur, and copy the CSS.

Presets
Preview — drag points to reposition
80px
80%

Colour Points

CSS Output
How to use
  1. Pick a preset to start with, then drag the colour points to reshape the gradient.
  2. Adjust blur and opacity sliders to soften or intensify the colour blends.
  3. Copy the generated CSS and drop it straight into your stylesheet's background-image.
FAQ

The output uses standard CSS radial-gradient functions, so it renders identically in all modern browsers. Older browsers fall back to the base background colour.

This tool produces pure CSS. To rasterise it, screenshot the preview or place the CSS on an element and capture it with your browser's dev tools.

They give backgrounds a soft, organic feel and look modern next to flat colours — popular in 2020s product design (Stripe, Linear, etc.).