What Is a CSS Gradient?
A CSS gradient is a smooth transition between two or more colors, generated entirely by the browser without an image file. CSS gradients can be linear (along a straight line), radial (radiating from a center point), or conic (rotating around a point). They reduce page weight and scale perfectly to any resolution.
Linear Gradients
Syntax: background: linear-gradient(direction, color-stop1, color-stop2, ...). Direction can be an angle (135deg) or keyword (to bottom right). Color stops can include a position: linear-gradient(to right, #ff6b6b 0%, #ffd93d 50%, #6bcb77 100%). Without positions, stops are evenly distributed. Add hard stops by repeating a position: linear-gradient(to right, red 50%, blue 50%) creates a sharp split.
Radial and Conic Gradients
radial-gradient(circle, #fff 0%, #000 100%) creates a circular gradient. The shape can be circle or ellipse; position is set with at (center, top left, etc.). conic-gradient(from 0deg, red, yellow, green, red) creates a pie-chart-like rotating gradient. Conic gradients are excellent for progress indicators and color wheels.
CSS Gradient Techniques
Use transparent in color stops for overlay effects. Combine multiple gradients with comma separation in background: they layer like images. Create stripes with repeating-linear-gradient(). Add grain texture over gradients using SVG filter or a semi-transparent noise image overlay. Gradient text: use background-clip: text with -webkit-background-clip for cross-browser support.
Browser Support
CSS gradients are supported in all modern browsers (Chrome 26+, Firefox 16+, Safari 7+, Edge 12+) without vendor prefixes. Avoid legacy -webkit-linear-gradient syntax in new projects. For very old browsers, provide a solid color fallback: background: #ff6b6b; background: linear-gradient(...).