---

What is a CSS Gradient?

CSS gradients create smooth color transitions purely in CSS, without any image files. There are three types: linear-gradient transitions along a straight line at a configurable angle (e.g. 45deg, to right), radial-gradient radiates outward from a center point in a circular or elliptical shape, and conic-gradient sweeps colors around a center point like a color wheel. All three types support multiple color stops — individual colors at specific positions (0%–100%) — giving you precise control over the color distribution. Gradients are widely used for hero backgrounds, button fills, card overlays, progress bars, and decorative dividers.

How to Use the CSS Gradient Generator

1. Select a gradient type: Linear, Radial, or Conic.

2. For linear gradients, adjust the angle slider (0–360°) or type an angle directly.

3. For radial gradients, choose the shape: circle or ellipse.

4. Edit the color stops — click a color swatch to open the color picker and drag the stop position slider.

5. Click '+ Add color stop' to add more transition points for multi-color gradients.

6. Watch the live preview update in real time.

7. Copy the generated CSS and paste it as a background property in your stylesheet.

Frequently Asked Questions

How do I make a transparent gradient? Use rgba() or hsla() color values with an alpha channel of 0 for full transparency. For example, a color stop of rgba(0,0,0,0) is fully transparent black, useful for fade-out overlays on images.

How do I create a hard color stop (no transition)? Place two color stops at the same position — one ending and one beginning at that point. For example, red 50%, blue 50% creates an instant switch from red to blue at the midpoint with no gradient transition.

What browsers support conic gradients? Conic gradients are supported in all modern browsers (Chrome 69+, Firefox 83+, Safari 12.1+, Edge 79+). They are not supported in Internet Explorer.

Can I use multiple gradients on the same element? Yes. CSS background accepts a comma-separated list of layers. You can stack gradients, combine them with background images, and control each layer's position and size independently.

Keywords: CSS gradient generator, linear gradient, radial gradient, conic gradient, CSS background generator, gradient color picker, CSS gradient tool