What Is a Mesh Gradient (and Why Does It Look So Good)?

If you have ever scrolled past a background that looked like liquid color, you were probably looking at a mesh gradient.

Unlike a regular CSS gradient that fades from color A to color B in a straight line, a mesh gradient blends multiple colors across a 2D surface with organic, irregular transitions. The colors flow into each other like paint on wet paper. No hard edges, no predictable patterns.

That is why they feel different. Your brain reads them as natural, almost physical. And that is why they are showing up everywhere: landing pages, app interfaces, social media, presentations.

How it works

There are two main ways to create mesh gradients on the web:

The CSS hack. You layer multiple radial-gradient() declarations on top of each other, each positioned differently, with varying opacities and blend modes. It works, but it is tedious to get right and the result is always static.

The GPU approach. A WebGL shader computes the color of every pixel in real time, blending colors based on parameters like distortion, swirl, scale, and grain. The result is a gradient that actually moves and breathes. This is what InstantGradient uses.

Here is one rendering on your screen right now:

Hit shuffle to see a new one. Every palette generates a completely unique gradient.

Why not just use a CSS gradient?

CSS gradients are great for simple things: button hovers, subtle background tints, card borders. They load instantly and take one line of code.

But for anything that needs to stop someone from scrolling, they fall flat. Literally. A linear-gradient(to right, #264653, #e76f51) looks like what it is: a flat color fade.

Mesh gradients have depth. They have texture. And when they are animated, they have presence. That is the difference between a background that fills space and one that sets a tone.

If you want to see the comparison side by side, check out our mesh gradients vs CSS gradients breakdown.

Where to use them

Mesh gradients work best when you want to create a visual impression without adding content. Think:

• Hero sections on landing pages
• Social media backgrounds for posts, stories, thumbnails
• App splash screens and onboarding flows
• Presentation slides that need to look polished fast
• Email headers and marketing assets

Here is a palette that works great for a warm, approachable hero:

And one for something darker and more dramatic:

Browse more in our palette directory.

How to make one

You do not need Illustrator or Figma. Open the InstantGradient generator, hit spacebar, and you have a mesh gradient in under a second.

From there you can:

• Lock colors you like and shuffle the rest
• Tune parameters like distortion, swirl, and grain
• Add effects like fluted glass
• Export as PNG, WebP, animated video, CSS, or Tailwind code

What about accessibility?

Mesh gradients are beautiful but they can hurt readability if you put text directly on them. The uneven color distribution means contrast ratios vary across the surface.

Two rules that help:

1. Use a semi-transparent overlay between the gradient and your text (dark or light depending on the palette)
2. Test the worst-case spot, not just the average. The darkest area of your gradient might pass WCAG, but the lightest might not.

We wrote a full guide on making gradients accessible if you want the details.

Start exploring

If you have read this far, you probably want to try one. Go ahead:

• Open the generator and hit spacebar
• Browse community palettes for inspiration
• Explore 4,900+ named colors with shades, harmonies, and more