CSS Gradient Generator

Create beautiful CSS gradients with live preview. Choose colors, adjust angles, and copy the CSS code instantly. Perfect for web designers and developers looking for stunning background effects.

Color Stops

Preview

CSS Code


            

        


        
        

            
Popular Gradient Presets

            

                

                    
Sunset

                

                

                    
Ocean

                

                

                    
Forest

                

                

                    
Fire

                

                

                    
Sky

                

                

                    
Night

                

            

        

    


    

        
How to Use CSS Gradients

        

            CSS gradients allow you to create smooth color transitions between multiple colors. They're perfect for backgrounds, buttons, and decorative elements. Gradients are rendered by the browser and scale perfectly without image files.
        


        
Gradient Types

        

            

                Linear Gradient
                

                    Creates a straight-line color transition. Control the angle (0-360 degrees) to change direction. Perfect for backgrounds and headers.
                

            

            

                Radial Gradient
                

                    Creates a circular or elliptical color transition from center outward. Great for spotlight effects and rounded elements.
                

            

        


        
CSS Gradient Syntax

        

            Linear Gradient:

            background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);



            Radial Gradient:

            background: radial-gradient(circle at center, #667eea 0%, #764ba2 100%);
        


        
Gradient Best Practices

        
    
            
  • Limit colors: 2-3 colors usually look best. Too many colors can appear muddy
    • 
            
  • Consider contrast: Ensure text is readable on gradient backgrounds
    • 
            
  • Use color theory: Analogous colors create harmony, complementary colors add energy
    • 
            
  • Test on devices: Gradients may look different on various screens
    • 
            
  • Add fallback colors: Provide solid color fallback for old browsers
    • 
            
  • Optimize performance: Simple gradients perform better than complex ones
    • 
            
  • Match brand colors: Use gradients that complement your brand palette
    • 
            
  • Consider accessibility: Ensure sufficient contrast for WCAG compliance
    • 
        


        
Popular Gradient Directions

        
    
            
  • 0deg (to top): Vertical gradient from bottom to top
    • 
            
  • 90deg (to right): Horizontal gradient from left to right (default)
    • 
            
  • 180deg (to bottom): Vertical gradient from top to bottom
    • 
            
  • 270deg (to left): Horizontal gradient from right to left
    • 
            
  • 45deg: Diagonal gradient from bottom-left to top-right
    • 
            
  • 135deg: Diagonal gradient from top-left to bottom-right (popular)
    • 
        


        
Common Use Cases

        
    
            
  • Hero sections: Eye-catching backgrounds for landing pages
    • 
            
  • Buttons and CTAs: Add depth and visual interest
    • 
            
  • Cards and containers: Subtle gradients add dimension
    • 
            
  • Text overlays: Improve text readability on images
    • 
            
  • Loading screens: Animated gradients for better UX
    • 
            
  • Brand elements: Consistent gradient usage across design
    • 
            
  • Navigation bars: Modern, sleek header designs
    • 
            
  • Dividers and separators: Smooth transitions between sections
    • 
        


        
Frequently Asked Questions


        

            
Do gradients work in all browsers?

            

                Yes! CSS gradients are supported in all modern browsers (Chrome, Firefox, Safari, Edge). For IE9 and below, you may need a solid color fallback. The standard syntax works in 99%+ of browsers in use today.
            

        


        

            
How do I make a gradient transparent?

            

                Use rgba() colors with alpha channel. Example: linear-gradient(90deg, rgba(255,0,0,1) 0%, rgba(255,0,0,0) 100%) creates a red-to-transparent gradient. Great for overlays on images.
            

        


        

            
Can I use multiple gradients?

            

                Yes! Separate multiple gradients with commas: background: linear-gradient(...), radial-gradient(...). The first gradient appears on top. This allows complex layered effects.
            

        


        

            
What's the difference between deg and turn?

            

                Degrees (deg) range 0-360, while turns (turn) range 0-1. 90deg = 0.25turn, 180deg = 0.5turn, 360deg = 1turn. Use whichever feels more intuitive. Degrees are more common.
            

        


        

            
How many color stops should I use?

            

                2-4 color stops usually look best. Two colors create simple, clean gradients. Three or more allow more complex transitions. Too many stops (5+) can look cluttered and perform worse.
            

        


        

            
Can gradients affect page performance?

            

                Simple gradients have minimal impact. Complex gradients with many stops or large areas may affect performance on low-end devices. For best results, keep gradients simple and avoid animating them.