FAQ

What is a CSS gradient?

A CSS gradient is a smooth transition between two or more colors, used as a background image in CSS. Gradients can be linear (straight line), radial (circular), or conic (around a center point).

How do I use a CSS gradient?

Copy the generated CSS code and paste it into your stylesheet as a background property. For example: background: linear-gradient(135deg, #667eea, #764ba2);

What's the difference between linear, radial, and conic gradients?

Linear gradients transition along a straight line at a specified angle. Radial gradients radiate from a center point outward in a circle or ellipse. Conic gradients rotate around a center point like a color wheel.

Can I use gradients as text color?

Yes! Use background-clip: text and -webkit-text-fill-color: transparent to apply a gradient to text. GradientLab generates standard background gradients, but the CSS works for text too.

Are CSS gradients supported in all browsers?

Linear and radial gradients are supported in all modern browsers (Chrome, Firefox, Safari, Edge). Conic gradients have excellent support in modern browsers but may need a fallback for older versions.

How many color stops can I use?

CSS gradients support unlimited color stops. GradientLab lets you add as many as you need. For smooth gradients, 2-4 stops usually look best.

🎨 GradientLab

Gradient Type

Angle: 135°

Color Stops

CSS Output

Presets

Need gradients at scale?

FAQ