CSS Gradient Generator (linear, radial, conic)

Three gradient types in CSS

Linear gradient: colors transition along a straight line at a given angle. 0° points up, 90° points right (default reading direction), 180° points down. Most common for backgrounds, buttons, hero sections.

Radial gradient: colors transition outward from a center point. Shape can be a circle (our default) or ellipse. Best for spotlight effects, sun-like elements, or attention-drawing centerpieces.

Conic gradient: colors rotate around a center point, like a color wheel. Less common but powerful for pie charts, clock faces, or decorative spinners. Supported in modern browsers since 2020.

Color stops and the percentage system

Each color stop has a color and a position from 0% to 100%. 0% is the start of the gradient, 100% is the end. Two stops give a smooth two-color gradient. Adding a third stop in the middle creates a tri-color blend or a sharp band depending on positioning.

For sharp transitions (no blending), put two stops at the same position with different colors. For example, '#000 50%, #fff 50%' creates a sharp black-to-white split at the midpoint. This is how 'striped' backgrounds are made.

Performance and accessibility tips

Gradients render natively without HTTP requests, unlike background images. They scale infinitely without quality loss. They're animation-friendly: transition the position via background-position or animate gradient stops with custom properties.

Accessibility: don't put text directly over a complex gradient if contrast varies across the gradient. Either use a flat color overlay, ensure the gradient's average lightness contrasts with the text, or test with our contrast checker. WCAG AA requires 4.5:1 for normal text, 3:1 for large text.