CSS Gradient Generator

Create linear and radial CSS gradients with a live preview and copy the code.


  

  

    
    
  



    

    

      
Create beautiful CSS gradients in seconds with this free online gradient generator. Pick two colors, choose linear or radial, drag the angle slider, and watch the gradient update live. When it looks right, copy the ready-to-paste CSS background property — everything runs in your browser with nothing to install.

      

        
What is a CSS gradient generator?

        
A CSS gradient generator is a visual tool that builds the linear-gradient() or radial-gradient() value you drop into a CSS background property. Instead of guessing color stops and angles by hand, you choose colors with a picker, adjust the direction, and the tool writes the exact CSS for you with a live preview of the result.

        
      

      

        
How to generate a CSS gradient

        
Choose between a linear gradient (colors blend along a straight line at a given angle) or a radial gradient (colors radiate out from the center). Set your start and end colors, fine-tune the angle for linear gradients, and copy the generated background rule into your stylesheet.

        
  1. Pick the first and second colors with the swatches, or type a HEX code.
  2. Choose Linear or Radial as the gradient type.
  3. Drag the angle slider to set the direction of a linear gradient.
  4. Hit Random for instant inspiration, then click Copy CSS.

      

      

        
Why use this gradient generator?

        
  • 100% free with no ads, sign-up, or limits.
  • Live preview updates instantly as you tweak colors and angle.
  • Supports both linear and radial CSS gradients.
  • One click copies a ready-to-paste background rule.
  • Runs entirely in your browser — your design never leaves your device.

      

      

        
Frequently asked questions

        

          
What is the difference between a linear and radial gradient?

          
A linear gradient blends colors along a straight line at the angle you choose, while a radial gradient blends colors outward from a center point in a circular shape. Use the type selector to switch between them and compare the preview.

        

        

          
How do I use the generated CSS gradient?

          
Copy the generated rule and paste it into the background property of the element you want to style, for example: background: linear-gradient(90deg, #4f46e5 0%, #ec4899 100%);

        

        

          
Do CSS gradients work in all browsers?

          
Yes. The standard linear-gradient() and radial-gradient() functions are supported by all modern browsers, so the code this tool generates works everywhere without vendor prefixes.

        

        

          
Can I enter HEX color codes directly?

          
Yes. You can type a HEX value such as #4f46e5 into either color field, or use the color picker to choose visually. Three-digit shorthand like #f0c is expanded automatically.