CSS Gradient Generator

Build beautiful CSS gradients visually — linear, radial, and conic.

135°
0%
50%
100%
background: linear-gradient(135deg, #8b5cf6 0%, #3b82f6 50%, #06b6d4 100%);

CSS Gradient Generator — What It Does

Choose a gradient type, add color stops, adjust the angle or position, and see a live preview update instantly. Copy the ready-to-use background CSS property directly into your stylesheet. Supports linear, radial, and conic gradients with unlimited color stops.

Gradient Types

  • Linear — linear-gradient(angle, color1, color2) — straight-line transition with angle control (0–360°)
  • Radial — radial-gradient(shape, color1, color2) — circular or elliptical from a center point
  • Conic — conic-gradient(from angle, color1, color2) — sweeps around a center, great for pie charts

Useful Gradient Examples

  • linear-gradient(135deg, #667eea, #764ba2) — Purple diagonal
  • linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.7)) — Image overlay fade
  • radial-gradient(circle at center, #f5af19, #f12711) — Warm spotlight
  • conic-gradient(#ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000) — Color wheel

Tips and Common Mistakes

  • Avoid the "transparent" keyword — Use rgba(r,g,b,0) instead to prevent unexpected gray midpoints in WebKit browsers.
  • Hard stops for stripes — Place two stops at the same percentage for an abrupt color change with no transition.
  • Performance — Gradients are rendered by the GPU and have no performance cost compared to background images.

Frequently Asked Questions

What is the difference between linear-gradient, radial-gradient, and conic-gradient?
linear-gradient transitions colors along a straight line at a given angle (e.g., 45deg). radial-gradient radiates colors outward from a center point in a circular or elliptical shape. conic-gradient sweeps colors around a center point like a pie chart or color wheel. All three are defined as CSS background-image values.
How do I create a transparent gradient in CSS?
Use the rgba() or hex color with alpha channel in your color stops. For example: linear-gradient(to bottom, rgba(0,0,0,0.8), rgba(0,0,0,0)). A common use case is overlaying a fade-to-transparent image caption. Avoid using the "transparent" keyword directly, as it can produce gray midpoints in some browsers.
Can CSS gradients use multiple color stops?
Yes. You can add as many color stops as needed. Each stop can specify a color and an optional position (percentage or length). For example: linear-gradient(to right, #ff0000 0%, #00ff00 50%, #0000ff 100%). Hard color transitions can be created by placing two stops at the same position.
How do I make a repeating gradient pattern?
Use repeating-linear-gradient() or repeating-radial-gradient(). The pattern repeats from the last color stop back to the first. For stripes: repeating-linear-gradient(45deg, #000 0px, #000 10px, #fff 10px, #fff 20px) creates alternating 10px diagonal stripes.
Do CSS gradients work in all browsers?
linear-gradient and radial-gradient are supported in all modern browsers without prefixes. conic-gradient has good support in modern browsers (Chrome 69+, Firefox 83+, Safari 12.1+) but may need a fallback for older environments. Check caniuse.com for precise compatibility data before relying on conic gradients in production.