Gradient Generator
← All toolsAdd as many color stops as you like, set each one's position, pick an angle or switch to radial, and hueshift writes the exact background CSS for you — ready to paste into a stylesheet.
CSS
How to use the Gradient Generator
- Choose Linear or Radial from the Type menu.
- For linear gradients, drag the Angle slider to set the direction.
- Click “+ Add stop” to add a color, or adjust the color and position of an existing stop.
- Copy the generated CSS from the box at the bottom — it's a complete background declaration.
FAQ
- How many stops can I add?
- As many as you want — you need at least two for a gradient to make sense, which is why the last two can't be removed.
- What's the difference between linear and radial here?
- Linear paints stops along a straight line at your chosen angle; radial paints them outward from the center in circles.
- Can I reorder stops?
- Drag a stop's position slider — hueshift always renders stops sorted by position, regardless of the order you added them in.
- Will this CSS work in every browser?
- linear-gradient() and radial-gradient() are supported in every modern browser without vendor prefixes.