Creating a Mesh Gradient Background

We're going to take a look at how to create a CSS mesh gradient background for your website.

Mesh gradients have been surging in popularity and are an incredible way to add a great pop of color to your website. They look great in signup screens, landing pages, login forms and so much more.

Code Snippets

Static CSS Gradient

  
    .DesignA11ybackgroundStatic {
	height: 100vh;
	width: 100vw;
	background: radial-gradient(at 18% 99%, 
    rgb(223, 229, 113) 0px, transparent 50%) 
    repeat scroll 0% 0%, 
    
    radial-gradient(at 97% 8%, rgb(118, 249, 173) 0px, 
    transparent 50%) repeat scroll 0% 0%, 
    
    radial-gradient(at 79% 82%, rgb(233, 109, 131) 0px, 
    transparent 50%) repeat scroll 0% 0%,
        
    radial-gradient(at 96% 10%, rgb(222, 81, 251) 0px, 
    transparent 50%) repeat scroll 0% 0%,    
                
    radial-gradient(at 42% 20%, rgb(116, 240, 251) 0px, 
    transparent 50%) repeat scroll 0% 0%,
                
    radial-gradient(at 4% 49%, rgb(203, 88, 218) 0px, 
    transparent 50%) repeat scroll 0% 0%, rgba(0, 0, 0, 0) 
    
    radial-gradient(at 57% 33%, rgb(218, 83, 228) 0px, 
    #a299ff 50%) repeat scroll 0% 0%;
}
  

Animated CSS Gradient

  
    // designA11y Animated Gradient
.DesignA11yCssAnimated {
    background: linear-gradient(132deg, #ffcaf0, #78e1fb, 
    #7a9def, #9d82ea, #a16ce9, #c580ef, #78e1fb);
    background-size: 1400% 1400%;

    -webkit-animation: DesignA11y 45s ease infinite;
    -moz-animation: DesignA11y 45s ease infinite;
    animation: DesignA11y 45s ease infinite;
    }

    @-webkit-keyframes DesignA11y {
    0%{background-position:0% 2%}
    50%{background-position:100% 99%}
    100%{background-position:0% 2%}
     }
    @-moz-keyframes DesignA11y {
    0%{background-position:0% 2%}
    50%{background-position:100% 99%}
    100%{background-position:0% 2%}
    }
    @keyframes DesignA11y {
    0%{background-position:0% 2%}
    50%{background-position:100% 99%}
    100%{background-position:0% 2%}
     }
  

Static Sample

Animated Sample

Figma Plugins & Files

Mesh gradients

By oodesign
Create awesome real mesh gradients right inside Figma.

Install Mesh Gradients
Noisy Gradients

By Shiv and vijay verma
The plugin utilizes the Metavatar algorithm to create stunning gradient backgrounds in a variety of cool colors. It also has the added feature of adding noise to make the gradients even more visually striking.
✨ PRO Tips: Duplicate the same image and change mode to overlay for more vibrant result

Install Noisy Gradients
Creating Gooey Animation in Figma

by Double Glitch 🇺🇦
Here is a step by step “How to” from Double Glitch that unpacks the sorcery of animated blobs

Get the How to
Attablob — create animated blobs!

by Double Glitch 🇺🇦
Custom animated blobs made possible in Figma natively! No plugins required, just use a set of predefined components to build the best blob ever and run it right in your prototypes.
The file includes a tutorial with the basics, but you'll find so much more possibilities if you experiment with it.

Get the Figma File