CSS Gradient Generator — Linear & Radial Gradient Builder

Creates a gradient along a straight line. You define a direction (e.g., "to right", "45deg") and two or more color stops. Syntax: linear-gradient(direction, color-stop1, color-stop2, ...). The direction defaults to "to bottom" if omitted. Example: background: linear-gradient(to right, #6366f1, #22c55e) — produces a left-to-right indigo-to-green transition.

Creates a gradient that radiates outward from a center point in a circular or elliptical shape. Define the shape (circle or ellipse), size keyword (closest-side, farthest-corner, etc.), center position, and color stops. Example: radial-gradient(circle at center, #6366f1, #1e1b4b). Ideal for spotlight effects, glowing buttons, and depth cues.

Creates a gradient that rotates around a center point, like a color wheel. Available in all modern browsers since 2021. Syntax: conic-gradient(from angle at position, color-stop, ...). Example: conic-gradient(red, yellow, green, blue, red). Perfect for pie charts, donut charts, and circular progress indicators — all in pure CSS.

A hard stop is created by placing two color stops at the same position: linear-gradient(to right, blue 50%, red 50%) creates a sharp half-and-half split. Repeating variants — repeating-linear-gradient(), repeating-radial-gradient() — tile the pattern, enabling stripes, checkerboards, and candy-cane effects entirely in CSS.

To apply a gradient to text, set background: gradient(...) on the element, then add -webkit-background-clip: text and -webkit-text-fill-color: transparent. This clips the gradient to the text shape. Example: background: linear-gradient(90deg, #6366f1, #22c55e); -webkit-background-clip: text; -webkit-text-fill-color: transparent. Works in all modern browsers; include both -webkit- and unprefixed versions.

You can stack multiple gradients and background images on a single element by separating them with commas in the background-image property. Layers are rendered front-to-back (left-to-right in the declaration). This enables complex compositions: a radial gradient overlay on a linear gradient base, for example.

linear-gradient and radial-gradient are supported in 99%+ of browsers. conic-gradient covers 95%+ (Chrome 69+, Firefox 83+, Safari 12.1+). Always declare a solid background-color fallback before the gradient: background-color: #6366f1; background-image: linear-gradient(...). Browsers that do not support the gradient fall back to the solid color gracefully.

Avoid transitioning gradient property values directly — the browser repaints the entire element on every frame, causing jank on mobile devices. Instead, animate the opacity of a pseudo-element or overlay div that holds the gradient. Alternatively, use the CSS @property rule to register and animate a custom property with hardware acceleration (supported in Chromium browsers).

Text on gradients presents a contrast challenge: a color that passes WCAG AA at one end may fail at the other. Test contrast at both the lightest and darkest point of the gradient against the text color. WCAG 2.1 AA requires at least 4.5:1 for normal text. For long-form text, use a solid or semi-transparent background instead of placing text directly over a gradient.