Creating Modern Mesh Gradients with CSS and SVG

Mesh gradients create flowing, fluid multi-color surfaces that elevate modern landing pages and software dashboards without the performance overhead of heavy bitmap images.

Create and export your own with the Mesh Gradient Generator.

Techniques for Browser-Native Mesh Gradients

1. Multiple Layered Radial Gradients: Stacking positioned radial gradients with different focal points on a single background property.
2. SVG Gaussian Blur Filters: Placing overlapping colored vector shapes inside an SVG and applying <feGaussianBlur stdDeviation="60"/>.
3. CSS Backdrop Blur Overlays: Combining low-opacity blurred color discs behind backdrop-filter: blur(40px).

.mesh-hero {
  background-color: #0f172a;
  background-image:
    radial-gradient(at 10% 20%, rgba(99, 102, 241, 0.7) 0px, transparent 50%),
    radial-gradient(at 80% 0%, rgba(236, 72, 153, 0.6) 0px, transparent 50%),
    radial-gradient(at 0% 80%, rgba(14, 165, 233, 0.6) 0px, transparent 50%),
    radial-gradient(at 80% 70%, rgba(168, 85, 247, 0.7) 0px, transparent 50%);
}

Generate ready-to-use CSS snippets with the Mesh Gradient Generator.