How do I create a CSS gradient?+
Use the CSS background property with the gradient function: background: linear-gradient(135deg, #ff6a1a, #7c5cff). This tool generates the correct syntax for you.
What is the difference between linear and radial gradients?+
A linear gradient transitions colours along a straight line at a specified angle. A radial gradient radiates outward from a centre point in a circle or ellipse.
Can I use gradients as borders in CSS?+
Not directly with border-color. Use background-clip and a pseudo-element trick, or use the border-image property: border-image: linear-gradient(...) 1.
How do I make a gradient text effect in CSS?+
Use background: linear-gradient(...) on the element, then apply background-clip: text and -webkit-background-clip: text. Note: gradient text is considered decorative-heavy - use sparingly.
What is the difference between a linear, radial, and conic gradient in CSS?+
Linear gradient transitions colours along a straight line at a specified angle. Radial gradient radiates outward from a centre point in a circular or elliptical shape. Conic gradient rotates colours around a centre point like a pie chart or colour wheel.
What is browser support for CSS gradients?+
Linear and radial gradients are supported in all modern browsers including Chrome, Firefox, Safari, and Edge without any vendor prefixes. Conic gradients are supported in Chrome 69+, Firefox 83+, and Safari 12.1+ - covering virtually all current browser usage.
Should I provide a fallback colour for CSS gradients?+
Yes. Always declare a solid background-color before the gradient. Browsers that don't support the gradient syntax fall back to the solid colour. Use the dominant colour of your gradient as the fallback: background-color: #your-color; background: linear-gradient(...);
Can I animate a CSS gradient?+
Gradients themselves cannot be directly transitioned with CSS transitions. A common workaround is to animate the background-position of a larger gradient, or use CSS custom properties with @property to enable smooth gradient animation in modern browsers that support Houdini.