KOEN

Mesh Gradient Generator

MESH · GRADIENT

Drag 4 to 8 color points to build a soft mesh gradient, then copy layered radial-gradient CSS or export a PNG at any size, from wallpapers to social images.

Drag a point to move it, or double-click an empty spot to add one. With a point selected, the arrow keys nudge it by 1% (5% with Shift).

CSS · 1920×1080 

      

    


    
  










  

    

      HOW TO
      
How to use

      
    
      
  1. Drag the color points on the canvas, or double-click an empty spot to add one (up to 8).
    2. 
      
  2. Select a point to change its color and spread, and set the base color, softness and blur.
    3. 
      
  3. Try a palette or press Random for new ideas.
    4. 
      
  4. Copy the CSS, or choose a size preset or custom width and height and save a PNG.
    5. 
      

    

    

      PAIRS WELL WITH
      
Pairs well with

      
    

  

  
  

    FAQ
    
FAQ

    
Will the CSS look the same at any size?
The CSS uses percentages so it scales to any box. Blur is set in pixels relative to the reference size shown above the code.

    
How large can the PNG be?
Up to 8192 px on each side. Very large images over 16.7 megapixels may fail on iPhone and iPad Safari, so use a desktop browser for those.

    
Are my designs uploaded?
No. The gradient is drawn and exported entirely in your browser.