CSS Gradient Generator — Linear, Radial & Conic Gradients

Visually build linear, radial, and conic gradients — drag color stops, try presets, preview live, and copy clean ready-to-use CSS.

CSS Gradient Generator — Linear, Radial and Conic Gradients
Home › Developer Tools › CSS Gradient Generator

CSS Gradient Generator: Linear, Radial and Conic Made Easy

Visually build beautiful CSS gradients with draggable color stops, angle control, and hand-crafted presets. Copy clean, production-ready CSS in one click — no design tool required.

Live preview
135deg
Color stops — drag a stop to move it, click the bar to add a stop, click a stop to edit it.
50%
Presets — click to apply

    
    
The declaration above works in every modern browser. Paste it into any stylesheet or style block.

  


  

    
100% private
Everything renders and copies in your browser. No uploads, no accounts, nothing leaves your device.

    
No signup
Open the page and start designing. Unlimited gradients, unlimited copies, zero friction.

    
Free forever
Presets, all three gradient types, and the CSS output are free with no paywall and no watermark.

  


  

    
How to use the gradient generator

    
    
      
  1. 1
    Pick a gradient type
    Choose Linear for straight blends, Radial for glows that spread from a center point, or Conic for color-wheel sweeps around a center.
    2. 
      
  2. 2
    Shape your stops
    Drag stops along the bar to reposition them, click the bar to add a stop (up to 8), then select any stop to set its color and exact position.
    3. 
      
  3. 3
    Set the angle
    For linear and conic gradients, slide the angle control from 0 to 360 degrees to rotate the blend direction or the starting point.
    4. 
      
  4. 4
    Copy the CSS
    Hit “Copy CSS” to grab the ready-to-paste background declaration, or copy the raw CSS from the code box by hand.
    5. 
    

  


  

    
Why designers use this generator

    

      
Three gradient types
Linear, radial, and conic gradients in one place — conic sweeps are perfect for pie charts, spinners, and color wheels.

      
True visual editing
Stops are draggable right on the gradient bar, with a color picker and position slider for pixel-exact control.

      
10 curated presets
Start from a hand-picked sunset, ocean, aurora, or candy palette, then tweak it into something of your own.

      
Clean copy-paste CSS
One declaration, no vendor prefixes, no bloat — the output drops straight into stylesheets, Tailwind arbitrary values, or inline styles.

      
Live WYSIWYG preview
The big preview box updates with every drag and slider move, so the CSS you copy always matches what you see.

      
Works everywhere
Fully responsive and touch-friendly — build gradients on a phone just as easily as on a desktop.

    

  


  

    
Frequently asked questions

    

      
What is the difference between linear, radial, and conic gradients?
A linear gradient blends colors along a straight line at an angle you choose. A radial gradient blends outward from a center point, great for glows and vignettes. A conic gradient sweeps colors around a center point like a color wheel, which is ideal for pie charts and loading spinners.

      
How do I add or remove color stops?
Click anywhere on the gradient bar to add a stop at that position (up to 8 stops). Click an existing stop to select it, then use “Remove stop” to delete it. At least 2 stops are required for a valid gradient.

      
What does the angle control do?
For linear gradients it rotates the blend direction from 0 to 360 degrees (135deg runs top-left to bottom-right). For conic gradients it sets the starting point of the color sweep. Radial gradients spread from a center, so the angle control is hidden for them.

      
Will the CSS work in all browsers?
Yes. The generator outputs standard CSS gradient syntax supported by all modern browsers — Chrome, Edge, Firefox, and Safari — with no vendor prefixes needed.

      
Can I use the gradient as a text background or overlay?
Yes. Paste the declaration into a background property on any element. For text effects, combine it with background-clip: text. For readability, check your overlay text with our Color Contrast Checker.

      
How do I make a hard-stop (striped) gradient?
Set two adjacent stops to the same position — for example red at 40% and blue at 40%. The blend becomes an instant color change, which creates crisp stripes, flags, and progress-bar segments.

      
Is my work saved anywhere?
No. Everything runs locally in your browser and nothing is uploaded or stored. Copy the CSS before you leave the page if you want to keep it.

    

  


  

    
Related tools

    

      Color Contrast Checker
Verify that text placed over your new gradient passes WCAG AA and AAA contrast levels.

      Hex to RGB Converter
Convert hex codes to RGB values for use in rgba overlays on top of gradients.

      Meta Tag Generator
Generate SEO and social meta tags with live previews for your pages.

      JSON Formatter and Validator
Pretty-print and validate JSON before shipping it in your projects.

      URL Encoder Decoder
Encode special characters in URLs and query strings safely.

    

  










	
	



	
	



			

			
		
	



	
 
	


	





	
                
                	Scroll to Top