CSS Gradient Generator

Build linear, radial and conic CSS gradients visually and copy the ready-to-use code.

Gradient Settings
CSS Code 

                    

                


                

                    

                        
Preset Gradients

                    

                    

                        

                    

                


            

        


        

            

                

                    
Tips

                

                

                    
    
                        
  • Use 2-3 colour stops for the smoothest transitions.
    • 
                        
  • Place two stops at nearly the same position for a hard colour band.
    • 
                        
  • Conic gradients are ideal for pie charts, colour wheels and loading spinners.
    • 
                        
  • Radial gradients work well for spotlight or vignette effects.
    • 
                    

                

            


            

                

                    
Related Tools

                

                

                    
                

            

        

    


    

        
Frequently Asked Questions

        

                        

                

                    
                

                

                    

                        A CSS gradient is a background image made up of a smooth transition between two or more colours. Unlike an image file, gradients are generated by the browser using CSS functions like linear-gradient(), radial-gradient() and conic-gradient(), so they scale perfectly and load instantly with no extra HTTP requests.                    

                

            

                        

                

                    
                

                

                    

                        A linear gradient transitions colours in a straight line at a chosen angle. A radial gradient transitions outward from a central point in a circle or ellipse shape. A conic gradient rotates colours around a centre point like a colour wheel, useful for pie charts and colour pickers.                    

                

            

                        

                

                    
                

                

                    

                        No. linear-gradient(), radial-gradient() and conic-gradient() are supported unprefixed in all current major browsers (Chrome, Firefox, Safari, Edge). Vendor prefixes such as -webkit-linear-gradient() are only needed for very old browser versions and are not included in the generated code by default.                    

                

            

                        

                

                    
                

                

                    

                        Each colour stop has a position (0% to 100%) that controls where along the gradient that colour is fully reached. Two stops close together create a sharp transition (a hard colour band), while stops spread further apart create a smoother blend.                    

                

            

                        

                

                    
                

                

                    

                        Yes, with a small trick. For gradient text, apply the gradient as background, then set background-clip: text and color: transparent. For a gradient border, use border-image: linear-gradient(...) 1, or wrap the element with a padding box and gradient background behind it.