css · gradients

Gradient Studio

Drag the color stops, spin the dial, pick a shape — the panel repaints as you go and the exact background line you would paste into a stylesheet is written out below it.

Preview linear

135deg

Turn the dial to change the direction.

Color stops 3 click the bar to add

% stop 1 / 3
0
0
0
100

Generated CSS 


        
Paste this straight onto any element. Nothing else is needed.

      


    


    
    


      

        
Shape

        

          
          
          
        


        


          

            Direction
            

              
                
                
                
                
                
                
              
              

                

                  
                  deg
                

                

              

            

          


          

          

          

          

            Tiling
            

              
            

            
          


          

        

      


      

        
Presets