How to Create Mesh Gradient Backgrounds with CSS — A Complete Guide

If you've ever admired the smooth, colorful backgrounds on sites like Stripe or Linear, you've seen mesh gradients in action. Unlike simple linear gradients that fade from one color to another, mesh gradients blend multiple colors across a canvas to create rich, organic transitions that feel almost three-dimensional.

In this guide, you'll learn exactly how mesh gradients work under the hood, how to build them with pure CSS, and how to use them effectively in your web projects — from hero sections to card backgrounds and beyond.

What Is a Mesh Gradient?

A mesh gradient is a type of gradient where multiple color points are distributed across a surface and blend smoothly into each other. Think of it as dropping several colored ink spots on wet paper — each color spreads and merges with its neighbors, creating complex, flowing transitions.

In traditional design tools like Figma or Illustrator, mesh gradients are a native feature. In CSS, there's no mesh-gradient property (yet), but we can achieve the same effect by layering multiple radial gradients on top of each other.

If you're wondering when to use a simple CSS gradient versus a mesh gradient, we covered that in detail in our CSS Gradient vs Mesh Gradient comparison. This guide focuses on the practical how — building mesh gradients from scratch with pure CSS.

The result: backgrounds that look premium, modern, and dynamic — without a single image file.

The CSS Technique: Layered Radial Gradients

The core idea is simple: stack several radial-gradient() values in a single background property. Each radial gradient acts as a colored "blob" positioned at a specific point on the canvas. When you layer enough of them with soft edges, they blend together to create that characteristic mesh effect.

Here's a basic example:

.mesh-gradient {
  width: 100%;
  height: 100vh;
  background:
    radial-gradient(circle at 20% 30%, #609EFF 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, #FCB055 0%, transparent 50%),
    radial-gradient(circle at 50% 80%, #FB847C 0%, transparent 50%),
    radial-gradient(circle at 70% 60%, #B6B8FD 0%, transparent 50%);
  background-color: #ffffff;
}

Let's break down what's happening:

1. radial-gradient(circle at 20% 30%, ...) — Creates a circular gradient centered at 20% from the left and 30% from the top.

2. #609EFF 0%, transparent 50% — The color is solid at the center and fades to transparent at 50% of its radius.

3. background-color: #ffffff — A white base color fills any gaps between the gradients.

Each gradient layer is essentially a soft, blurred color circle. When you stack four or five of them at different positions, they overlap and blend naturally.

Step-by-Step: Building a Mesh Gradient

Step 1: Choose Your Color Palette

Start with 3 to 5 colors that work well together. Mesh gradients look best with colors that are harmonious — analogous colors (neighbors on the color wheel) or a mix of warm and cool tones.

A good starting palette: a base neutral (white or off-white), two main colors, and one or two accent colors.

Step 2: Position Your Color Points

Distribute your colors across the canvas. Avoid placing them all in the center or all along edges. A good approach:

• One color in the top-left area

• One in the top-right

• One near the bottom-center

• One offset to the middle-right

.mesh-gradient {
  background:
    radial-gradient(circle at 15% 25%, #A78BFA 0%, transparent 50%),
    radial-gradient(circle at 85% 15%, #38BDF8 0%, transparent 50%),
    radial-gradient(circle at 50% 85%, #34D399 0%, transparent 50%),
    radial-gradient(circle at 75% 55%, #F472B6 0%, transparent 50%);
  background-color: #F0F4FF;
}

Step 3: Adjust the Spread

The transparent stop percentage controls how far each color bleeds. A smaller value (like 35%) creates tighter, more distinct color spots. A larger value (like 70%) creates broader, more diffuse blends.

/* Tight blobs — more defined shapes */
radial-gradient(circle at 20% 30%, #609EFF 0%, transparent 35%)

/* Soft blobs — dreamy, diffuse blending */
radial-gradient(circle at 20% 30%, #609EFF 0%, transparent 70%)

For most mesh gradients, a spread between 40% and 60% gives the best balance.

Step 4: Add Depth with Elliptical Gradients

You're not limited to perfect circles. Using ellipse instead of circle creates elongated color shapes that feel more organic:

.mesh-gradient-organic {
  background:
    radial-gradient(ellipse 60% 40% at 20% 30%, #609EFF 0%, transparent 55%),
    radial-gradient(ellipse 40% 70% at 80% 20%, #FCB055 0%, transparent 55%),
    radial-gradient(ellipse 50% 50% at 50% 80%, #FB847C 0%, transparent 55%);
  background-color: #ffffff;
}

Step 5: Add Grain for Texture (Optional)

Modern mesh gradients often include a subtle grain texture to reduce color banding and add visual warmth. You can achieve this with an SVG filter:

.mesh-gradient-grain {
  position: relative;
}

.mesh-gradient-grain::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.15'/%3E%3C/svg%3E");
  pointer-events: none;
  mix-blend-mode: overlay;
}

Practical Use Cases

Hero Section Background

<section class="hero-section">
  <h1>Build Something Beautiful</h1>
  <p>Start creating with mesh gradients today.</p>
</section>

.hero-section {
  min-height: 80vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #1a1a2e;
  background:
    radial-gradient(circle at 10% 20%, #A78BFA 0%, transparent 50%),
    radial-gradient(circle at 90% 10%, #38BDF8 0%, transparent 45%),
    radial-gradient(circle at 50% 90%, #34D399 0%, transparent 50%),
    radial-gradient(circle at 80% 60%, #F472B6 0%, transparent 40%);
  background-color: #F8FAFC;
}

Card Background

For cards, use fewer color points and a tighter spread to keep the effect subtle:

.gradient-card {
  padding: 2rem;
  border-radius: 1rem;
  background:
    radial-gradient(circle at 0% 0%, #609EFF22 0%, transparent 50%),
    radial-gradient(circle at 100% 100%, #FB847C22 0%, transparent 50%);
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
}

Notice the 22 at the end of the color hex — that's 13% opacity. Subtle gradients on cards prevent them from overwhelming the content.

Animated Mesh Gradient

You can animate mesh gradients by transitioning the background positions:

@keyframes mesh-shift {
  0% { background-position: 0% 0%, 100% 0%, 50% 100%, 80% 50%; }
  50% { background-position: 30% 20%, 70% 30%, 40% 70%, 60% 40%; }
  100% { background-position: 0% 0%, 100% 0%, 50% 100%, 80% 50%; }
}

.mesh-animated {
  background:
    radial-gradient(circle at var(--x1, 20%) var(--y1, 30%), #609EFF 0%, transparent 50%),
    radial-gradient(circle at var(--x2, 80%) var(--y2, 20%), #FCB055 0%, transparent 50%),
    radial-gradient(circle at var(--x3, 50%) var(--y3, 80%), #FB847C 0%, transparent 50%);
  background-color: #ffffff;
  background-size: 200% 200%;
  animation: mesh-shift 15s ease-in-out infinite;
}

Performance Tips

Mesh gradients are rendered by the browser's compositor, so they're generally performant. But keep these tips in mind:

• Limit the number of layers. 4 to 6 radial gradients is the sweet spot. Beyond 8, you may notice rendering overhead on lower-end devices.

• Prefer CSS over images. A CSS mesh gradient is resolution-independent, resizable, and weighs zero bytes compared to a PNG or WebP background image.

• Use will-change: background sparingly. Only add it if you're animating the gradient, and remove it when the animation is done to free up GPU memory.

• Test on mobile. Some older mobile browsers may render complex gradient stacks more slowly. Always test on real devices.

The Easy Way: Use a Generator

Writing mesh gradient CSS by hand is a great exercise, but for production work, a visual tool saves time and gives you much more control.

Better Gradient lets you create mesh gradients visually by dragging colored shapes on a canvas, adjusting blur and grain, and exporting the result as CSS, SVG, PNG, or WebP. You can also try the Random Gradient Generator to discover unexpected color combinations, or the Tailwind Gradient Generator if you're working with Tailwind CSS.

For text effects, the Text Gradient Generator applies mesh gradients directly to typography using background-clip: text.

Wrapping Up

Mesh gradients are one of the most effective ways to give your website a modern, polished look without relying on stock images or heavy assets. The technique boils down to layering radial gradients with soft edges — something any browser can render natively with zero dependencies.

Start with a harmonious palette of 3 to 5 colors, position them across the canvas, adjust the spread until the blend feels natural, and optionally add grain for texture. For a faster workflow, generate your gradients visually with Better Gradient and copy the code directly into your project.