🫧Mesh Gradient Background Guide

Stack 3 to 5 radial gradients into a multi-color background

Separate the values with spaces or commas and write plain numbers without the percent sign. For example #EC4899 20 25 55 85 means color #EC4899, center at 20% 25%, size 55% and opacity 85%.


            


            

            

                

                    
LayerHEXCenter X, YSizeOpacity

                    
                

                
Each layer ends on the same color at zero alpha instead of transparent, which keeps older environments and design tools from darkening the edge; current browsers handle transparent cleanly.

            


    
    
        


    
    

        
You Might Also Need

        

            
                🎨
                
CSS Gradient Generator
Generate linear and radial CSS gradient code

            
            
                💻
                
CSS Box Shadow Generator
Generate CSS box-shadow code with live preview

            
        

    


        

            
Stacking radial gradients into a mesh-style background

            
The multi-color backgrounds you see everywhere come from several color blooms overlapping from different directions. This page covers only the most manageable version of that: three to five circular radial gradients stacked, with the color, center, size and opacity of every layer entered by you. There are no preset colors or positions offered as the good-looking choice. Enter the values and you get CSS ready to paste next to a live preview.

            
What the generated code looks like

            
The base color goes out as background-color, and each layer becomes one entry in the comma separated background-image list, where the first entry stacks on top. Every layer ends on the same color at zero alpha rather than on transparent, which keeps older environments and design tools from darkening the edge; current browsers blend in premultiplied alpha, so transparent itself no longer looks muddy. Center coordinates accept negative values and values above 100, which parks a bloom off screen so only its edge reaches in. The syntax follows the CSS Images specification as of October 2026.

            
What it does not cover

            
Linear and conic gradients belong to separate tools and are not generated here. This approach also does not compute a true mesh gradient surface, it stacks circular blooms so the result reads like one. Animation and blur are not included either.

            

                
Frequently Asked Questions

                
Why not end each layer on transparent?
In CSS, transparent is defined as black with zero alpha, but current browsers blend gradients in premultiplied alpha, so fading to transparent no longer looks muddy. Each layer still ends on the same color at zero alpha for older environments and design tools. That is what the generated code uses.

                
Can center coordinates be negative?
Yes, anything from -50 to 150 is accepted. Parking a center off screen lets only part of the bloom reach in, so the color washes in from a corner. Placing one near each corner is a common arrangement.

                
Will it generate linear or conic gradients too?
No, this page handles stacked circular radial gradients only. Single linear and radial generators, conic gradients and general background-image layering are each handled by separate tools.