KOEN

Noise Background Generator

GRAIN · NOISE · SVG

Add SVG feTurbulence grain to a solid color or gradient, copy the CSS and save a seamless tile, noise-only or full-size PNG. Fine film grain to rough static.

PREVIEW A textured background A fine layer of grain over a flat color makes the screen feel warm, like print.
LOUPE · ZOOM
CSS 0 KB 

        


        

          
PNG

          

            
            
            

              

                
                ×
                
              

              
            

          

        

      

    

  










  

    

      HOW TO
      
How to use

      
    
      
  1. Start from a preset, or choose a solid or gradient background and its colors.
    2. 
      
  2. Adjust noise intensity, grain size, contrast, detail and blend mode.
    3. 
      
  3. Use the loupe to check the grain up close, and press New pattern for a different seed.
    4. 
      
  4. Copy the CSS, or save a seamless tile PNG, a transparent noise-only PNG or a full-size image.
    5. 
      

    

    

      PAIRS WELL WITH
      
Pairs well with

      
    

  

  
  

    FAQ
    
FAQ

    
Will the tile repeat without visible seams?
Yes. The noise is generated with stitched tiles, so the tile PNG and the CSS background repeat seamlessly.

    
What's the noise-only PNG for?
It's the grain on a transparent background, so you can layer it over anything in your design tool and set its blend mode there.

    
Does it slow down my website?
The CSS embeds a small SVG as a data URI, usually just a few KB, and the browser draws the noise itself, so there's no extra image request.