CSS Gradient Generator
Build beautiful gradients visually and copy the CSS code
Frequently Asked Questions
What is a CSS gradient? +
A CSS gradient is a smooth transition between two or more colors, used as a background image in CSS. Unlike solid colors, gradients create visual depth and interest. CSS supports linear gradients (transitioning along a straight line) and radial gradients (transitioning outward from a center point).
What is the difference between linear and radial gradients? +
Linear gradients transition colors along a straight line in a specified direction (e.g., left to right, top to bottom, or at any angle). Radial gradients transition colors outward from a center point in a circular or elliptical shape. Linear gradients are more commonly used for backgrounds, while radial gradients create spotlight or circular effects.
How do I add more than two colors to a gradient? +
You can add as many color stops as you want to a CSS gradient. In this tool, click the "Add Color Stop" button to insert additional colors. Each color stop can have its own position (percentage) along the gradient. In CSS, simply add more colors separated by commas in the gradient function.
Do CSS gradients work in all browsers? +
Modern CSS gradients (using the standard syntax) are supported in all current browsers including Chrome, Firefox, Safari, Edge, and Opera. Very old browsers (IE9 and below) do not support gradients at all. This tool can generate vendor-prefixed code (-webkit-, -moz-) for broader compatibility if needed.
Can I use a gradient as a text color? +
Yes, you can apply a gradient to text using a combination of background-clip and -webkit-background-clip set to "text", along with a transparent text color. Apply the gradient as a background-image on the text element, then set -webkit-text-fill-color: transparent. This technique works in all modern browsers.