EN
PortuguêsEnglishEspañol
All tools
Developer tools 100% free

Mesh gradient generator

Pick up to five colors and generate variations until you like one. The background is made with CSS radial-gradient and can also be downloaded as an image.

How to use

Thank you so much for helping!

Every donation helps pay for the servers and keeps the tools free for everyone. Pick or type an amount:

Secure payment by Stripe. Opens in a new tab.
Back to CSS and design

Gradients with many colors

Available in: PortuguêsEnglish

Advertisement

Mesh gradient generator: what it is for

A mesh gradient is a gradient with several color blobs that blend together, widely used for website backgrounds, presentations and posts.

Here you pick two to five colors, shuffle the positions until you like it and copy the CSS made with radial-gradient layers, which the browser draws without downloading an image. If you prefer, download it as PNG in screen, post, story or link-preview sizes.

How to use

  1. Pick the colors and the background.
  2. Tap shuffle again until you like the composition.
  3. Copy the CSS or download the PNG in the right size.

When to use it

  • Hero background for a website.
  • Presentation or post cover.
  • Phone wallpaper.

Frequently asked questions

What is a mesh gradient?

It's a gradient with several color blobs that blend in different directions instead of going from one side to the other. It looks organic, like an aurora or ink in water, and is widely used for website and presentation backgrounds.

How is it made in CSS?

With several radial-gradient layers, each with one color at one position and transparent at the edges, over a background color. The browser draws it all, with no image to download.

What about text on top?

Choose colors with similar lightness and set the text in a color that contrasts with all of them, or use a semi-transparent layer behind the text. Check the contrast before publishing.

Is it really free?

Yes, 100% free. No sign-up, no subscription and no usage limits. All Tools123 tools are free and run right in your browser.

Similar tools

Scroll reveal animation (pure CSS)Generate the effect of elements appearing as the page scrolls (scroll reveal) in pure CSS, with animation-timeline: view(): fade in, slide up, slide in from the sides, grow or unblur, with adjustable distance and scroll range, and without hiding anything in browsers that do not support it yet.Open →
CSS clamp() calculator for fluid typographyCalculate the CSS clamp() for text and spacing that grows with the screen width: enter the size on mobile and on desktop and the screen widths, and copy the value in rem, with a preview and a zoom accessibility warning.Open →
Google Fonts pairingsTry Google Fonts pairings for your website's headings and body text: pick a ready-made pair or build your own, see the preview with your text and copy the loading link and the CSS.Open →
Color contrast checker (WCAG)Check whether your text color has enough contrast with the background under the WCAG AA and AAA accessibility rules, with a live preview.Open →
Color converterConvert colors between HEX, RGB, HSL and CMYK and see lighter and darker shades.Open →
HEX color to Tailwind classFind out which color in the default Tailwind CSS (v3) palette is closest to your HEX or RGB color, with the perceptual distance and the five nearest options, or use the exact value with bracket syntax.Open →

The tools are provided as is, without warranty. We are not responsible for the results or for how they are used.