A linear gradient transitions between colors along a straight line in a specified direction (e.g., left to right, top to bottom, or at a custom angle). A radial gradient radiates outward from a center point in a circular or elliptical shape. Linear gradients are more common for backgrounds and banners; radial gradients work well for spotlights, buttons, and focal emphasis.

The generator outputs a ready-to-use CSS value like background: linear-gradient(135deg, #FF5733, #3B82F6). Copy this and paste it directly into your CSS, Tailwind class, or styled component. For cross-browser compatibility, older projects may also need a -webkit- prefix, though modern browsers do not require it.

Color stops define where each color starts and ends along the gradient axis. You can add multiple stops to create complex multi-color gradients. Each stop has a color and a position (as a percentage). For example, red at 0%, yellow at 50%, and green at 100% creates a traffic light gradient. Stops can overlap to create sharp color transitions.

Yes. Use rgba() or hsla() colors with an alpha value for any color stop to include transparency. For example, linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,1)) creates a transparent-to-black fade. This technique is commonly used for overlay effects and text legibility improvements on image backgrounds.

Apply the gradient as a background-image, then add background-clip: text and -webkit-background-clip: text, and set color: transparent. This causes the gradient to show through the text shape. Browser support is excellent in modern browsers: div { background-image: linear-gradient(to right, #FF5733, #3B82F6); -webkit-background-clip: text; color: transparent; }