What Are CSS Gradients?
CSS gradients are a way to display smooth transitions between two or more colors directly in the browser, without using images. They are defined using CSS functions — linear-gradient(), radial-gradient(), and conic-gradient() — and applied to elements via the background-image or background properties.
Because gradients are rendered by the browser's GPU rather than downloaded as files, they load instantly, display at perfect sharpness on any screen resolution, and add zero bytes to your HTTP requests.
Linear vs. Radial Gradients
Linear gradients transition colors along a straight line. The direction can be horizontal (left to right), vertical (top to bottom), or at any angle. The syntax is:
Radial gradients radiate outward from a center point in a circular or elliptical pattern. The syntax is:
Color Stops: Controlling Where Colors Appear
Color stops define what color appears at what position along the gradient. Each stop has a color and a position (percentage along the gradient).
Simple two-stop gradient:
background: linear-gradient(to right, red 0%, blue 100%);
Multi-stop gradient with custom positions:
background: linear-gradient(to right,
#ff6b6b 0%,
#ffd93d 30%,
rgba(255,255,255,0) 100%
);
Practical Uses for CSS Gradients
Hero section backgrounds: A subtle linear gradient gives depth to page headers without the overhead of a background image. Many major websites use pure CSS gradients for their above-the-fold backgrounds.
Button hover effects: Gradient backgrounds on buttons feel more three-dimensional than flat colors. A linear gradient from a lighter shade at top to a slightly darker shade at bottom mimics natural lighting.
Text overlays on images: A linear gradient from black (50% opacity) to transparent is the standard technique for making text readable over photography. Applied as a pseudo-element or overlay div, it provides contrast without covering the entire image.
Progress bars: Animated gradient progress bars (using background-size and background-position animation) are visually engaging and need no images.
Skeleton loading screens: The "shimmer" effect in skeleton loading screens is a linear gradient animated horizontally, simulating a light reflection moving across content placeholders.
Browser Support
All CSS gradient functions (linear-gradient, radial-gradient, conic-gradient) are supported in all modern browsers including Chrome, Firefox, Safari, Edge, and Opera. They have been supported without vendor prefixes since approximately 2012–2014. There is no need for -webkit- prefixes for any currently supported browser version.
Frequently Asked Questions
Can I layer multiple gradients in CSS?
Yes. CSS backgrounds support multiple layers. You can stack gradients (and background images) using comma separation. The first listed is the top layer: background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url(photo.jpg); creates a semi-transparent dark overlay on an image. You can layer as many gradients as you like.
How do I animate a CSS gradient?
CSS cannot directly animate gradient color stops, but there are two approaches: (1) Animate background-position on a large background-size gradient: background-size: 200% 200% combined with a keyframe animation on background-position creates a moving gradient. (2) Use CSS custom properties (variables) animated with JavaScript, updating the gradient values dynamically.
What is a conic gradient?
A conic gradient transitions colors around a center point (like a pie chart), rather than along a line or outward from a center. It is created with conic-gradient(). Common uses: pie charts, color wheels, and angle-based visual effects. Browser support is now nearly universal (Chrome 69+, Firefox 83+, Safari 12.1+).
How do hard color stops work in gradients?
You can create sharp color transitions (no blending) by placing two color stops at the same position: linear-gradient(to right, red 50%, blue 50%) creates a sharp line at the midpoint with no gradient. This technique is used for striped patterns and split-color effects.