Lite Tools

CSS Gradient Generator

Visually build linear and radial gradients, copy the CSS.

Gradient type
Color stops (2–5)
Action
Action
Action
Live preview
CSS code 

      
    

    
Paste this snippet into any element's styles: no third-party library required.

  






  
How to use

  
    
    
  1. Pick the gradient type: linear blends along a direction, radial blends outward in a circle from the center.
    2. 
    
  2. For linear gradients, drag the angle slider (0–360°) to set the direction; the slider hides automatically for radial gradients.
    3. 
    
  3. Set each color stop's value and position percentage. Use "Add stop" for up to 5 stops, or remove them down to a minimum of 2.
    4. 
    
  4. The preview updates live. When you are happy, click "Copy" to grab the multi-line CSS and paste it into your stylesheet.
    5. 
    
  5. Out of ideas? Hit "Random palette" to get a fresh, harmonious set of colors.
    6. 
  






  
FAQ

  

    How well is the generated CSS supported?
    
linear-gradient and radial-gradient are standard CSS syntax. Every modern browser: Chrome, Edge, Firefox, Safari and the major mobile browsers: supports them natively, so no -webkit- prefix is needed.

  

  

    Why is there no angle slider for radial gradients?
    
A radial gradient spreads outward in a circle from its center, so its look depends on the center point and shape rather than an angle. This tool uses the standard circle at center syntax, which is why the angle slider hides in radial mode.

  

  

    Can color stops be out of order?
    
Yes. CSS lets you place stops at any position and browsers sort them automatically. The preview always matches the generated code, and you can even use out-of-order stops to create hard, looping transitions.

  

  

    How does the random palette work?
    
It picks one random hue and derives a set of HSL colors at fixed hue intervals, keeping saturation and lightness in ranges that work well for gradients, then distributes the stops evenly. That is why the results always look harmonious.

  




          
          

    
How to use
  1. Choose linear or radial
    Select Linear to blend along one direction or Radial to blend outward from the center. Switching to radial hides the angle slider automatically.
  2. Drag the angle slider
    For linear gradients, drag the 0-360 degree slider to set direction and watch the live preview follow. 0 points up, 90 points right, 180 points down.
  3. Tune the color stops
    Adjust the color and position percentage of each stop. Press Add stop for up to five stops, or Remove to trim back to the minimum of two.
  4. Copy the CSS code
    Click Copy to grab the generated snippet and paste it into any stylesheet or inline style. It is standard CSS, so no -webkit- prefix is needed.

    
About this tool
CSS Gradient Generator replaces hand-written gradient syntax with visual controls. A slider sets the angle, editable stops control colors and positions, and the preview always matches the generated code exactly. The output is plain linear-gradient or radial-gradient CSS. Every modern browser, from Chrome and Edge to Firefox and Safari, supports it natively. No prefixes, no library, no build step: copy the snippet and paste it into any stylesheet or inline style.
Use it to set the tone of hero banners, buttons, cards and posters. It also works for learning how gradient parameters behave. Dragging the angle slider once teaches more than reading the spec. The Random palette button picks one random hue. It derives a set of HSL colors at fixed intervals within usable saturation and lightness ranges, and distributes the stops evenly.

    
How it works
In CSS, a gradient angle names the direction the blend travels toward. 0deg points up and increases clockwise, so 90deg faces right and 180deg faces down. That is the opposite handedness of the math convention, where angles run counterclockwise, and it is a classic beginner trap. Keywords like to top right are equally valid. The tool simply emits numeric angles, so every result can be reproduced exactly. The live preview makes the semantics stick after a few drags.
Gradients are painted by the browser rather than fetched. There is no image request, no blur when the viewport scales, and no bitmap asset to maintain. The cost sits on the paint path. Animating a gradient or laying one across a long scrolling surface adds repaint work. Static banners, buttons and card backgrounds are effectively free, and even five stops compile to a single background declaration, so the payload is negligible.

    
When to use it
  1. Hero banners without flat fills
    Blend two neighboring dark shades of your brand color across the header. Layer a second darker gradient top-down, and white headlines keep their contrast anywhere on the banner.
  2. Lit buttons without images
    A two-stop gradient from a light tint to the base color fakes a top-lit surface. It beats flat buttons, needs no sliced assets, and it follows the theme color when the theme changes.
  3. Teaching the syntax live
    Drag the angle slider and add or remove stops in front of a class while the code updates alongside. Students grasp each parameter's role in minutes, which static slides rarely achieve.

    
Tips & tricks
  • Stops may be out of order. CSS sorts them automatically, and deliberate disorder creates hard edges or looping transitions.
  • Set two neighboring stops to the same position percentage for crisp striped edges instead of a smooth blend.
  • Radial gradients have no angle. Their look depends on the center point and shape, which is why the slider disappears in radial mode.

    
Things to watch
  • Transparent stops are hand-written
    Stops here carry color and position only. For a fade to transparent, edit the copied snippet, swap the color for rgba() or transparent, then adjust the position.
  • Radial defaults to a centered circle
    The generated radial-gradient centers on the element. To move the focal point, add positioning like circle at 30% 20% in the code. The preview will not do it for you.
  • Translucent borders let it bleed
    A background paints under a translucent border by default, and the gradient shows through muddily. Set background-clip to padding-box when you need the two visually separated.

  

          
Related Tools