Micro Tools
Advertisement

Gradient Image Maker

Design linear and radial gradients with a live preview, then export as a PNG image or copy the CSS. Perfect for backgrounds and hero sections.

Gradient settings

Tweak the controls. The preview updates live.

Three stops are blended evenly across the gradient.

Preview

Preview ready.




        

      


      
      
Advertisement


      

        

          
What you are making

          
A gradient blends two or more colors smoothly across a surface. This tool renders that blend onto a canvas you control: pick linear or radial, set the angle, choose three colors, and dial in the exact pixel size you need. The same design is shown both as a downloadable PNG and as copy-paste CSS.

        

        

          
When to use the PNG vs the CSS

          
Use the CSS snippet for website backgrounds: it is a few dozen bytes, scales to any screen, and never needs an image request. Use the PNG when you need a gradient inside a design tool, a social post, or anywhere CSS is not available.

        

      


      

        
Related tools

        

          Image compressorShrink images to a target size or quality. Compress to exact KB.
          HEIC to JPG converterConvert iPhone HEIC photos to JPG, right in your browser.
          WebP converterConvert WebP to PNG or JPG.
        

      


      

        
Gradient Image Maker FAQs

        

          What gradient types are supported?
          
Linear gradients at any angle from 0 to 360 degrees, and radial gradients that bloom outward from the center.

        

        

          How many colors can I use?
          
Three color stops, blended evenly at 0%, 50% and 100% across the gradient.

        

        

          What image sizes can I export?
          
Any size from 16 up to 4000 pixels on each side. Common picks are 1920 by 1080 for wallpapers and 1200 by 630 for social cards.

        

        

          Is the PNG high quality?
          
Yes. It renders at the exact pixel size you set with no compression artifacts from the gradient itself, since PNG is lossless.

        

        

          Can I use the gradients commercially?
          
Yes. Everything you generate here is yours to use in personal and commercial projects with no attribution needed.

        

      


      
      
Advertisement