Introduction to CSS Gradients
CSS gradients allow you to create smooth transitions between two or more colors without using image files. They are declared using CSS functions and can be applied to any element's background property. Gradients are resolution-independent, meaning they look sharp on all screen sizes and pixel densities. They are also highly performant because they are rendered by the browser's compositor rather than loaded as external resources, making them ideal for backgrounds, overlays, buttons, and decorative elements.
There are three main types of CSS gradients: linear gradients, radial gradients, and conic gradients. Each type creates a different visual effect and is suited to different use cases. Understanding how to control direction, color stops, and transition smoothness across all three types gives you the ability to create virtually any gradient effect you can imagine. You can use our CSS Gradient Generator to experiment with all these options visually and generate production-ready code.
Linear Gradients
Direction and Angle
A linear gradient creates a transition along a straight line. By default, it flows from top to bottom. You can change the direction using keywords like to right, to bottom right, or to top left. For precise control, use an angle value in degrees (deg), turns (turn), or radians (rad). For example, linear-gradient(45deg, #ff0000, #0000ff) creates a diagonal gradient from red to blue at a 45-degree angle. The angle specifies the direction of the gradient line, where 0deg points upward, 90deg points to the right, 180deg points downward, and 270deg points to the left.
Color Stops
Color stops define where each color begins and ends along the gradient line. You can add as many color stops as you need, and each stop can optionally include a position value. For example, linear-gradient(to right, #ff0000 0%, #ffff00 50%, #00ff00 100%) creates a gradient that transitions from red to yellow at the midpoint and then to green. If you omit the position values, the browser distributes the colors evenly. You can also create sharp transitions by placing two color stops at the same position, which is useful for striped patterns and hard edges.
Color stops can use any valid CSS color value, including named colors, HEX codes, RGB, RGBA, HSL, HSLA, and even CSS custom properties. Using transparent or semi-transparent colors (with alpha channels) creates layered effects that let background colors or images show through. Combining gradients with transparency is a powerful technique for creating glassmorphism effects, overlay panels, and elegant UI backgrounds.
Radial Gradients
Shape: Circle and Ellipse
A radial gradient creates a transition that radiates outward from a center point. The shape parameter determines whether the gradient forms a perfect circle or an ellipse. By default, the shape is an ellipse that adapts to the element's aspect ratio. If you specify circle, the gradient maintains a circular shape regardless of the container's dimensions. For example, radial-gradient(circle, #ff0000, #0000ff) creates a circular gradient from red to blue, while radial-gradient(ellipse, #ff0000, #0000ff) stretches to fill the container.
Position and Size
You can control where the center of the radial gradient appears using position values. Keywords like center, top, bottom, left, and right position the center at those locations, while combinations like top right place it in the upper-right corner. You can also use length or percentage values for precise positioning. The size parameter controls how far the gradient extends and accepts keywords like closest-side, farthest-side, closest-corner, and farthest-corner, which define the gradient's extent relative to the container edges and the center point.
Combining shape, position, and size gives you fine-grained control over the radial gradient's appearance. For instance, radial-gradient(circle at 30% 70%, #ff6b6b 0%, transparent 50%) creates a soft circular glow positioned in the lower-left area of the element, which is useful for spotlight effects and ambient lighting in UI design. Experimenting with these parameters lets you create depth, focus, and atmosphere in your layouts without any images.
Conic Gradients
Conic gradients create color transitions that rotate around a center point, similar to the wedges of a pie chart or the markings on a clock face. The gradient starts at a specified angle and sweeps clockwise. For example, conic-gradient(from 0deg, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000) creates a smooth color wheel. Conic gradients are particularly useful for creating pie charts, color wheels, gauge indicators, and loading spinners entirely in CSS.
Like radial gradients, conic gradients accept an at keyword to specify the center point. By default, the center is at 50% 50%. You can also set a starting angle using the from keyword, allowing you to rotate the starting position of the gradient. Hard color stops in conic gradients are excellent for creating segmented elements like progress indicators, pie charts, and dials. For example, conic-gradient(#ff0000 0deg, #ff0000 90deg, #0000ff 90deg, #0000ff 180deg, #00ff00 180deg) creates a simple three-segment pie chart.
Repeating Gradients
CSS provides repeating-linear-gradient, repeating-radial-gradient, and repeating-conic-gradient functions that tile the gradient pattern infinitely. The color stop positions determine the size of each repetition. For example, repeating-linear-gradient(45deg, #ff0000 0px, #ff0000 10px, #0000ff 10px, #0000ff 20px) creates diagonal red and blue stripes that repeat every 20 pixels. This technique is commonly used for striped backgrounds, checkerboard patterns, and subtle texture effects without any image files.
Repeating gradients are incredibly versatile. You can create subtle linen textures, geometric patterns, and animated backgrounds entirely in CSS. When using repeating gradients, be mindful of the color stop values — if the last stop is not explicitly positioned, the browser may create an abrupt transition between the last color and the first color of the next repetition. Always ensure that the distance between the first and last stops defines a complete pattern cycle for smooth, seamless tiling.
Hard Stops and Transparent Transitions
Hard stops occur when two or more color stops are placed at the exact same position along the gradient line. Instead of a smooth transition, the colors change instantly, creating a sharp boundary. For example, linear-gradient(to right, #ff0000 50%, #0000ff 50%) creates a sharp line dividing the element into a red left half and a blue right half. This technique is essential for creating striped patterns, geometric shapes, and segmented UI elements without using borders or pseudo-elements.
Transparent transitions leverage the transparent keyword or zero-alpha colors to create gradients that fade into the element's background. For example, linear-gradient(to bottom, rgba(0,0,0,0.5), transparent) creates a dark overlay at the top that fades to nothing at the bottom, which is commonly used on hero images and card components. Combining transparent gradients with solid backgrounds or images underneath creates layered, dimensional effects that are difficult to achieve with solid colors alone.
Gradient Text Effects
One of the most popular uses of CSS gradients is creating colorful text without using images. This is achieved by applying a gradient to the background-clip property set to text and setting the color to transparent. The syntax is: background: linear-gradient(to right, #ff0000, #ff7700, #ffff00, #00ff00, #0000ff); -webkit-background-clip: text; background-clip: text; color: transparent; This technique is widely used for headings, logos, and call-to-action buttons to create eye-catching, vibrant text that scales perfectly across all device sizes.
Gradient text works with all three gradient types, not just linear. A radial gradient can create a spotlight effect on text, and a conic gradient can produce rainbow or spinning text animations when combined with CSS custom properties and transitions. The background-clip: text technique is supported in all modern browsers and provides a lightweight, performant alternative to SVG text or image-based text replacements.
Common UI Patterns Using Gradients
Gradients are a staple of modern UI design and appear in countless patterns. Hero section backgrounds often use large, soft radial gradients or multi-stop linear gradients to create depth and visual interest. Buttons and interactive elements use subtle linear gradients to appear raised or pressable. Card components use bottom-fading gradients to indicate overflow content. Progress bars and sliders use linear gradients to fill track areas dynamically. Loading states use conic gradients for spinning indicators.
Glassmorphism — a popular design trend — relies heavily on gradients. A frosted glass effect is created by applying a semi-transparent gradient background to an element and combining it with backdrop-filter: blur(). The gradient provides the subtle color tinting, while the blur creates the frosted appearance. This combination produces elegant, modern UI elements that feel lightweight and layered without heavy shadow effects.
Performance and Browser Support
CSS gradients are rendered natively by the browser and are generally very performant. They do not require HTTP requests, file downloads, or image decoding, making them faster than equivalent image-based backgrounds. However, complex gradients with many color stops or layered gradients applied to large areas can increase paint times, especially on lower-powered devices. As a best practice, limit the number of layered gradients and avoid animating gradient properties directly, as gradient animations trigger expensive repaints.
All modern browsers — Chrome, Firefox, Safari, and Edge — fully support linear, radial, and conic gradients. Vendor prefixes are no longer needed for any gradient type. Conic gradients have slightly older browser support (Safari 12.1+, Chrome 69+) but are now widely available. For older browsers, fallback solid colors or simple gradient backgrounds can be provided as a backup, ensuring a graceful degradation strategy that does not break layouts in unsupported environments.
Key Takeaways
- CSS gradients are resolution-independent, performant, and require no image files — use them for backgrounds, overlays, buttons, and decorative elements.
- Linear gradients transition along a straight line controlled by angle or direction keywords, with color stops defining where each color appears.
- Radial gradients radiate outward from a center point and support circle and ellipse shapes with customizable position and size.
- Conic gradients rotate around a center point and are ideal for pie charts, color wheels, and loading spinners.
- Hard stops create sharp boundaries between colors, while transparent transitions create overlays that fade into backgrounds.
- Gradient text uses background-clip: text with a transparent color to create vibrant, scalable text effects.
- All three gradient types are fully supported in modern browsers with no vendor prefixes required.
Frequently Asked Questions
Can I animate CSS gradients?
Directly animating CSS gradient properties (like color-stop positions or colors) is not supported by CSS transitions because gradients are images, not animatable values. However, you can achieve gradient animations using several techniques: CSS custom properties (variables) registered with @property for smooth color transitions, background-position animation on oversized gradients, or rotating conic gradients using transform. The @property approach is the most flexible and performant method available in modern browsers.
How many color stops can a CSS gradient have?
There is no hard limit on the number of color stops in a CSS gradient defined by the specification. However, practical limits exist based on browser rendering performance. Excessively complex gradients with dozens of stops applied to large areas may cause rendering slowdowns, especially on mobile devices. For most practical purposes, gradients with two to six color stops cover the vast majority of design needs. If you need more complex visual effects, consider using multiple layered backgrounds instead of a single gradient with many stops.
What is the difference between radial-gradient and conic-gradient?
A radial gradient transitions colors outward from a center point like ripples in a pond, creating circular or elliptical color transitions. A conic gradient transitions colors by rotating around a center point like the hands of a clock or wedges of a pie chart. Radial gradients are best for spotlights, glows, and vignettes, while conic gradients are best for pie charts, gauges, and rotational patterns. Both support customizable center positions, but their visual characteristics and use cases are fundamentally different.