CSS Gradient Generator

Create beautiful CSS gradients visually. Copy the code instantly.

Quick Presets
CSS Code 

                

            



            
            

                1920 × 280
            


            
            


                
                

                    
Gradient Type

                    

                        
                        
                        
                    


                    

                        

                            
                            
                            135°
                        

                    


                    
                


                
                

                    
Color Stops

                    

                    
                

            




            
            


            
            

                
How to Use

                
    
                    
  1. Choose a gradient type — Linear, Radial, or Conic
    2. 
                    
  2. Adjust the angle (for linear) or shape (for radial)
    3. 
                    
  3. Click a color swatch to change colors, drag sliders to adjust positions
    4. 
                    
  4. Click + Add Color Stop to create multi-color gradients
    5. 
                    
  5. Click Copy CSS to copy the generated code
    6. 
                

            


            

                
What Are CSS Gradients?

                

                    CSS gradients let you display smooth transitions between two or more colors.
                    They're rendered by the browser (not images), so they're resolution-independent and
                    lightweight. Use them for backgrounds, buttons, overlays, and more.
                    This generator supports linear-gradient, radial-gradient,
                    and conic-gradient — all standard CSS properties supported by every modern browser.