한국어
Home › Developer › CSS Gradient Generator

CSS Gradient Generator

Create linear, radial and conic gradients by dragging color stops, then copy the finished CSS. Includes ready-to-use presets.

Click the bar to add a color stop. Drag a stop to move it.

    

    
Presets

  

  

    
Settings

    

    

    
    
    

      
%

      

      

    

    
  












How to use


1Choose a typePick linear, radial or conic, then set the angle or center position.
2Set colorsClick a stop on the bar to change its color, position and opacity. Click the bar itself to add a stop.
3Copy the codeWhen you are happy with it, copy the CSS and paste it into a background property.


When it helps


Gradients are the easiest way to add depth to backgrounds, buttons and banners. But tuning the angle and stop positions of linear-gradient in code alone means saving and refreshing over and over until it looks right.
Here you drag color stops on screen, see the result immediately and copy the code once you like it. Each stop can have its own opacity, so you can also build dark overlays to place over photos. Conic gradients are useful for pie charts and color wheels.
The presets are good starting points. Pick one and swap in your brand colors.


FAQ


Where do I paste the code?
Use it as the value of the background or background-image property in CSS, for example .box { background: linear-gradient(...); }
Do conic gradients work in every browser?
All current versions of Chrome, Edge, Safari and Firefox support them. Very old browsers may not show them.
Can I apply a gradient to text?
Yes. Put the value in background and add -webkit-background-clip: text; color: transparent; to fill the text with the gradient.
How many color stops can I add?
There is no limit, but more stops mean longer code. Two to five is usually enough. You cannot go below two.