⌘Ctrl K

CSS Gradient Generator

Build a linear, radial or conic gradient from color stops and copy its CSS

Gradient
CSS 

            

        

    


    

        

            

                Color stops
                

                    
                    
                    
                

            

            

                

                    

                        

                    

                    
Click the bar to add a stop, drag a handle to move it (arrow keys when focused, Delete to remove it).

                

                

            

        


        

            
Options

            

                

                    
                    

                        
                        

                            
                            deg
                        

                    

                

                

                    

                        
                        
                    

                    

                        
                        
                    

                

                

                    
                    

                        

                            X
                            
                            %
                        

                        

                            Y
                            
                            %
                        

                    

                

                

                    
                    
                    
OKLab avoids the dull gray middle between distant colors. OKLCH goes around the hue wheel.

                

                

                    

                        
                        
                    

                    
Repeats the stops past the last one: end them before 100%.