CSS Gradient Generator

Build linear, radial, and conic CSS gradients visually. Add as many colour stops as you want, adjust position and angle, and copy the ready-to-use CSS property in one click.

100% freeNo sign-upRuns in your browserNo upload · data stays private

  
  

    
  




  

    
How to use this tool

    
    
      
  1. Pick gradient type (linear, radial, or conic) and adjust the angle.
    2. 
      
  2. Set each colour stop's colour and position using the controls.
    3. 
      
  3. The preview and CSS update live. Click "Copy CSS" to grab the code.
    4. 
    

  


  

    
Example output

    
For a two-stop linear gradient from #ff6ec7 at 0% to #7b61ff at 100° at 135°: 
background: linear-gradient(135deg, #ff6ec7 0%, #7b61ff 100%);