Mesh Gradient Generator
Create modern mesh gradients by combining multiple radial-gradients. Add, remove and drag points to compose vibrant backgrounds Stripe/Linear style. Everything in your browser.
Preview (clique para mover o ponto selecionado)
Mesh gradient sem imagem
Mesh gradients criam fundos vibrantes que parecem misturas de tinta. A técnica empilha vários radial-gradient com cores que desaparecem para transparente, sobre uma cor de base sólida. Cada ponto vira um foco de cor.
Sem imagem, sem WebGL, sem JS em runtime — apenas CSS. Funciona em todos os browsers modernos. Tudo no navegador.
Create vibrant mesh gradients
You've probably seen those colourful, fluid backgrounds that became a trademark of companies like Stripe and Linear. They're mesh gradients, and they give any screen a modern look. This generator recreates the effect by combining several radial gradients into a single composition.
Add, remove and drag the colour points to compose the background, blending tones until you reach that smooth, vibrant transition that defines the style. The flexibility is far greater than an ordinary linear gradient's, and the result comes out in CSS ready to paste into your project.
It all runs in the browser, with an immediate preview as you tweak. A no-fuss way to adopt one of the most-used background trends in today's sites and apps.
Related Tools
CSS Gradient Generator
Create linear and radial CSS gradients with real-time preview. Adjust colors, positions and angle. Copy the CSS code with one click.
CSS Button Generator
Create custom CSS buttons: color, text, padding, border-radius, shadow and hover. Live preview and ready-to-copy HTML+CSS. Everything in your browser.
CSS Glassmorphism Generator
Create frosted-glass effects with backdrop-filter, transparency and borders. Adjust blur, saturation and opacity. Live preview and copy-ready CSS. Everything in your browser.