Mesh Gradient Generator

Create beautiful soft mesh gradients with multiple radial color blobs. The modern ambient background effect used by Stripe, Linear and Apple — beautiful, lightweight and pure CSS.

Blobs

Generated CSS


          

        

        
      

      

        
What Is a Mesh Gradient?

        
A mesh gradient is a smooth, multi-color background created by layering several soft radial gradients at different positions and opacities. Unlike traditional two-color gradients, mesh gradients blend four to eight colors into a harmonious, cloud-like ambient background. They are the signature visual element of modern SaaS landing pages — most notably Stripe, Linear and Apple product pages.

        
How Mesh Gradients Work in CSS

        
Mesh gradients are created by stacking multiple radial-gradient layers in a single CSS background property, each with its own color, position and size:

        
background:
  radial-gradient(at 20% 30%, #155EEF 0%, transparent 50%),
  radial-gradient(at 80% 20%, #7C3AED 0%, transparent 50%),
  radial-gradient(at 50% 80%, #0EA5E9 0%, transparent 50%),
  radial-gradient(at 90% 90%, #EC4899 0%, transparent 50%);

        
Each layer contributes one color, and the transparent fades allow layers to blend smoothly. The result is a rich, multi-colored background with no harsh transitions.

        
When to Use Mesh Gradients

        
    
          
  • Hero sections: Beautiful ambient backgrounds behind headlines and CTAs.
    • 
          
  • App onboarding: Welcoming, friendly first screens.
    • 
          
  • Card backgrounds: Soft gradient fills behind pricing tiers or feature cards.
    • 
          
  • Presentation slides: Warm, sophisticated title slides.
    • 
          
  • Empty states: Interesting backgrounds for otherwise empty pages.
    • 
        

        
Frequently Asked Questions