CSS Gradient Generator

CSS supports three gradient types: linear-gradient transitions colors along a straight line at any angle, radial-gradient radiates colors outward from a center point as a circle or ellipse, and conic-gradient rotates colors around a center point like a color wheel. Each type also has a repeating variant (repeating-linear-gradient, etc.) useful for creating stripe and pattern effects.

Add multiple color stops separated by commas: background: linear-gradient(90deg, #ff0000 0%, #00ff00 50%, #0000ff 100%). Each stop consists of a color and an optional position. Browsers distribute colors evenly if you omit positions. You can add as many stops as needed — use this tool's "+ Add Color Stop" button to experiment visually.

Yes. Apply the gradient as background, then use background-clip: text and -webkit-background-clip: text with color: transparent. This clips the gradient to the text shape. It works in all modern browsers and is popular for hero section headings, logos, and decorative typography.