↑↓ to move · Enter to open · Esc to close

CSS Gradient Generator

Build linear, radial, and conic CSS gradients with up to eight color stops, see them live, and copy the background CSS with a solid fallback color.

Runs in your browser. Your data is not uploaded.
Built by · Updated
Preview
CSS

How to use the CSS Gradient Generator

  1. Pick a Type (linear, radial, or conic) and set the Angle or Shape, or start from a preset.
  2. Edit the Color stops: color, Opacity, and Position. Add up to eight stops.
  3. Check the Preview and press Copy CSS.

How it works

  • linear-gradient(135deg, ...) blends along a line. 0deg points up, 90deg to the right.
  • radial-gradient(circle at center, ...) spreads out from a point, as an ellipse or a circle.
  • conic-gradient(from 0deg at 50% 50%, ...) sweeps around a point, like a color wheel or a pie chart.
  • Each stop is a color and a position in percent. Stops with opacity are written as rgba().
  • The first stop's color is written as a plain background line first, so very old browsers still get a color.

Examples

.gradient {
  background: #f0b90b;
  background: linear-gradient(135deg, #f0b90b 0%, #1f5fbf 100%);
}
  • The Color wheel preset gives conic-gradient(from 0deg at 50% 50%, #ff0000 0%, #ffff00 17%, ..., #ff0000 100%).
  • Ticking Repeating with stops at 0% and 10% makes stripes.

Limitations

  • Gradients blend in sRGB, which can look grey in the middle between opposite colors. Adding a middle stop fixes it.
  • The center of radial and conic gradients is fixed at the middle; change at center by hand if you need another spot.
  • Gradient text needs extra CSS (background-clip: text) that isn't generated here.

Frequently asked questions

Do CSS gradients work in all browsers?

Linear and radial gradients work in every current browser. Conic gradients work in all browsers released since 2020.

How do I make a transparent gradient?

Lower the Opacity of a stop. It is written as rgba(), so the background behind shows through.

Are gradients better than background images?

Yes for simple color blends: they cost no download, scale to any size, and are easy to change.

Often used together with CSS Gradient Generator.