โ Frequently Asked Questions
What is the difference between linear, radial and conic gradients?
A linear gradient transitions colors along a straight line at a specified angle. A radial gradient radiates from a center point outward in circular or elliptical shapes. A conic gradient sweeps colors around a center point like a color wheel โ perfect for pie charts, color wheels, and spinner designs. All three are supported in all modern browsers with the CSS gradient() functions.
How do I add a gradient to a CSS background?
Copy the generated CSS code and paste it as your background property: background: linear-gradient(135deg, #667eea, #764ba2). You can also add it as background-image. For overlays on top of images, combine with background syntax: background: linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5)), url(image.jpg).
Can I use gradients as text colors in CSS?
Yes, using the clip technique: set background to your gradient, then add -webkit-background-clip: text and -webkit-text-fill-color: transparent (or background-clip: text and color: transparent for modern browsers). This clips the gradient to the text shape, creating colorful gradient text effects widely used in modern web design.