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 <code class="text-xs bg-zinc-100 dark:bg-zinc-800 px-1 rounded">background</code> CSS property directly into your stylesheet. Supports linear, radial, and conic gradients with unlimited color stops.
Gradient Types
Useful Gradient Examples
Tips and Common Mistakes
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.