🌈

CSS Gradient Generator

Create beautiful linear, radial, and conic CSS gradients with live preview

Gradient Settings
Generated CSS

            
          

          

            
Preset Gradients

            

          

        

        
        

          
Free CSS Gradient Generator

          
Our CSS Gradient Generator makes it easy to create stunning gradients for websites, UI designs, and graphics. Simply choose your colors, adjust the angle and stops, and copy the generated CSS code directly into your project.

          
Types of CSS Gradients

          
    
            
  • Linear Gradient: Colors transition along a straight line at a specified angle
    • 
            
  • Radial Gradient: Colors radiate from a central point outward in an elliptical or circular pattern
    • 
            
  • Conic Gradient: Colors rotate around a central point like a pie chart
    • 
          

          
How to Use CSS Gradients

          
Copy the generated CSS and use it as a background or background-image property in your CSS. Example: background: linear-gradient(135deg, #6366f1, #8b5cf6);