CSS Gradient Generator

Pick 2 or 3 colors, the gradient type, and the angle: the preview updates in real time and the CSS code is ready to copy.


    
    


    
🔒 Everything runs in your browser: no data is sent or stored.

  


  

    
Linear or radial: which one should you use?

    
A linear gradient blends colors along a straight line: at 90° it flows
    from left to right, at 180° from top to bottom. It's the go-to choice for hero backgrounds,
    buttons, and banners. A radial gradient starts at the center and spreads
    outward in a circle, which works great for glow effects, soft backgrounds, and avatars. Either
    way, the generated code uses the native linear-gradient() and
    radial-gradient() functions, supported by every modern browser with no vendor
    prefixes.

    
How to use the generated code

    
Copy the line and paste it into your stylesheet as the value of the background
    property on any element: a div, the body, a card. With 3 colors the
    browser spaces the stops evenly (0%, 50%, 100%); if you need finer control, add percentages
    after each color by hand, for example #ff8a5c 20%. A handy tip: two colors that
    sit close together produce elegant, subtle fades, while two opposite colors create bold
    contrast that's perfect for calls to action.