CSS Gradient Generator
Pick colors and an angle to build a gradient, then copy the CSS.
About the CSS Gradient Generator
The CSS Gradient Generator builds linear and radial gradients visually and gives you ready-to-use CSS. Gradients are used for backgrounds, buttons, hero sections and overlays, and they load instantly because they are generated by the browser rather than downloaded as images.
A linear gradient blends colours along a straight line at an angle you choose, where 0 degrees points up and 90 degrees points right. A radial gradient blends outwards from a centre point. Each colour has a position, called a stop, and adding stops lets you create more than two-colour effects. Smooth gradients between similar hues look professional, while very contrasting colours can create banding or a harsh look.
How to use it
- Choose Linear or Radial.
- For linear gradients set the angle.
- Pick colours and positions for the stops.
- Press Copy CSS and paste it into the background property.
Tips and good to know
- Always ensure text on top of a gradient keeps enough contrast at its lightest part.
- Provide a solid background-color as a fallback for very old browsers.
- Subtle gradients in the same hue family often look more modern than rainbow blends.
Frequently asked questions
How do I make a gradient transparent?
Use colours with alpha values, such as rgba, for one or more stops.
Can I animate a gradient?
You can animate background-position or use CSS variables, but the gradient itself is not directly animatable.
Does it work in all browsers?
Linear and radial gradients are supported in all modern browsers.