- What is a CSS gradient?
- A CSS gradient is a smooth visual transition between two or more colors, defined entirely in code using functions like linear-gradient(), radial-gradient(), or conic-gradient(). Gradients are applied via the CSS background or background-image property and render at any resolution without quality loss — no image file needed.
- What is the difference between linear, radial, and conic gradients?
- A linear-gradient transitions colors along a straight line at a specified angle (e.g. top-to-bottom, left-to-right, diagonal). A radial-gradient radiates from a central point outward in an ellipse or circle shape. A conic-gradient sweeps colors around a pivot point like a color wheel or clock face — commonly used for pie charts and progress rings.
- How do I use a CSS gradient as a background?
- Apply the gradient to the background or background-image property. Example: background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); This sets a diagonal purple gradient. Our generator writes this property automatically — just click Copy CSS.
- How do I make a CSS gradient with multiple colors?
- Add more color stops using the '+ Add Stop' button in the editor. Each stop defines a color and a position (0%–100%) along the gradient axis. For example: linear-gradient(90deg, red 0%, orange 33%, yellow 66%, green 100%) creates a four-color horizontal gradient.
- How do I create a transparent or fade-to-transparent gradient?
- Set one of your color stops to a transparent color. Use a hex value with full transparency like #00000000 (transparent black), or manually type a color with alpha. Example: linear-gradient(to bottom, #667eea, transparent) fades from a solid color to fully transparent.
- How do I add a gradient to text in CSS?
- Generate your gradient here, then apply it to text with these three CSS properties: background: linear-gradient(90deg, #f953c6, #b91d73); -webkit-background-clip: text; -webkit-text-fill-color: transparent; The gradient value from this tool works directly with that technique.
- Do CSS gradients work in all browsers?
- Yes — linear-gradient and radial-gradient have 99%+ global browser support with no vendor prefix required. conic-gradient is fully supported in all modern browsers (Chrome 69+, Firefox 83+, Safari 12.1+, Edge 79+). The code this tool generates uses standard un-prefixed syntax.
- How do I use a CSS gradient in Tailwind CSS?
- Tailwind provides from-{color}, via-{color}, to-{color} utilities paired with a direction class like bg-gradient-to-r. For custom hex colors, use arbitrary values: from-[#667eea] to-[#764ba2]. The Tailwind tab in this generator outputs the correct class string automatically. For radial or conic gradients, use the CSS output inside a bg-[...] arbitrary class.
- What does the gradient angle control do?
- For linear gradients, the angle sets the direction of the color flow: 0° flows bottom to top, 90° flows left to right, 180° flows top to bottom, and 135° flows diagonally top-left to bottom-right. For conic gradients, the angle sets the starting rotation of the sweep.
- Can I export the gradient to SCSS?
- Yes. Switch to the SCSS tab in the output panel. The generator wraps the gradient value in a $gradient SCSS variable and provides a sample .element { background: $gradient; } block. Copy and paste it into your SCSS partial.
- Why does my CSS gradient look gray or washed out in the middle?
- This is known as the 'gray dead zone.' When a linear-gradient transitions between two highly saturated colors on opposite sides of the color wheel (e.g. red to blue), the midpoint passes through an unsaturated gray in sRGB color space. The fix is to add an intermediate color stop — for example, add a purple stop at 50% between red and blue. This gives the browser an explicit midpoint to blend through instead of calculating a desaturated middle value.
- What is OKLCH and why do OKLCH gradients look better?
- OKLCH (Oklab Lightness Chroma Hue) is a perceptually uniform color space. When a gradient is interpolated in OKLCH, the perceived brightness stays consistent across the full color transition, eliminating the gray dead zone that sRGB gradients produce. Modern browsers support OKLCH via color(oklch ...) syntax in color-mix() and gradient functions. OKLCH gradients are defined in the CSS Color Level 4 specification.
- Is this CSS gradient tool free?
- Yes — completely free with no account required. The generator runs entirely in your browser. No data is collected or sent to any server.
