CSS Gradient Generator

Linear gradients transition colors along a straight line (top-to-bottom, left-to-right, or any angle). Radial gradients transition outward from a center point in concentric rings. Linear is what you'd use for a sky background (light at top, darker at bottom); radial is what you'd use for a sun glow effect (bright center fading outward).

Use 2–3 color stops, transition between perceptually-close colors (similar hue, similar lightness), and avoid sharp jumps. The default mid-stop position is 50% — moving it shifts where the color transition happens. For very smooth gradients, blend in HSL or LCH color space rather than RGB (modern CSS supports <code>linear-gradient(in oklch, ...)</code>).

Conic gradients (color rotating around a center point — like a pie chart) are supported by all modern browsers via CSS <code>conic-gradient()</code>. This generator focuses on linear and radial; for conic, write the CSS manually: <code>conic-gradient(from 0deg, red, yellow, green, red)</code>.

RGB interpolation between two saturated complementary colors (red and green, blue and yellow) passes through dull gray at the midpoint because the average of bright red and bright green is mathematical gray. To fix: add an intermediate stop at the midpoint with a vibrant color, or use HSL/LCH interpolation which travels through the color wheel rather than the RGB cube.

Apply it as background or background-image. <code>background: linear-gradient(135deg, #6366f1, #ec4899);</code> on the button. For multi-layer effects, you can stack gradients with multiple background values separated by commas — useful for overlay tints over images.

Linear and radial gradients are supported in every browser released since about 2012. Newer features (in oklch, multi-position stops, double-percentage stops) require recent versions. For very old browsers (IE 11 and earlier), you'd need vendor prefixes and fallback solid colors — but those browsers are essentially extinct in 2026.