Mesh Gradients

Stack multiple radial gradients to approximate a mesh gradient — a soft, multi-color blob background.

Example

.mesh {
  background-color: #f0f4ff;
  background-image:
    radial-gradient(ellipse at 20% 20%, rgba(102,126,234,0.5) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 80%, rgba(118,75,162,0.4) 0%, transparent 60%),
    radial-gradient(ellipse at 60% 30%, rgba(249,168,37,0.3) 0%, transparent 50%);
}

CSS

Full Editor

Pro Tip

Mesh gradients are pure CSS — no images, no SVG, no JavaScript.

Related Resources

CSS Reference

Complete tag & property list

CSS How-To Guides

Step-by-step practical guides

CSS Exercises

Practice what you've learned