The Ultimate Guide to Linear Gradient in CSS [2025]

Introduction

The difference between a good design and a great one often lies in the details. One of the easiest ways to add depth and visual flair to any element on your page is by using a Linear Gradient in CSS. 

This versatile tool lets you create smooth, flowing color transitions in any direction you choose. Whether you want a subtle fade or a vibrant rainbow, it's all possible with a single line of CSS. In this tutorial, we’ll explore everything you need to know about the Linear Gradient in CSS, from basic syntax to advanced techniques like color stops. Let's start designing! 

Want to master more than just gradients and build stunning, modern websites? Explore upGrad’s Software Engineering Courses to boost your skills in advanced CSS, JavaScript, and front-end development with hands-on practice.

Overview

In CSS, a linear gradient creates a seamless transition between two or more colors in a straight line. It is one of three gradient types in CSS, along with radial and conic gradients, and is represented by the linear-gradient() function.

You must provide at least two color stops, the colors you wish to transition between, to build a linear gradient. The gradient's direction may also be customized by providing a direction or angle. Linear gradients flow from top to bottom by default, but you may modify the direction to generate horizontal, diagonal, or any other gradient you choose.

What are Gradients in CSS?

A gradient is a mathematical concept that describes a function's direction and rate of change. It is used in numerous fields, including calculus, linear algebra, and machine learning, to determine the slope or steepness of a function.

Ready to move beyond development and unlock new career opportunities? We've curated these forward-looking courses specifically to enhance your professional growth: 

• Professional Certificate Program in Cloud Computing and DevOps

• AI-Powered Full Stack Development Course by IIITB

• Master of Design in User Experience

Linear gradient in CSS is a method to exhibit seamless transitions between two or more specified colors in CSS. CSS has three types of gradients: linear, radial, and conic.

Linear Gradient

The linear-gradient() method generates a gradient that travels down, up, left, right, or diagonally. To create a linear background gradient from red to orange, you can use the following code:

background-image: linear-gradient(red, orange);

To create a linear gradient from left to right with the colors of the rainbow, you can use the following code:

background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);

Radial Gradient

The radial-gradient() method produces a gradient that radiates from a central point.

To create a radial gradient from purple to orange, you can use the following code:

background-image: radial-gradient(purple, orange);

To create a radial gradient that starts from the center and goes to the edges of the element, you can use the following code:

background-image: radial-gradient(circle, red, yellow, green);

Conic Gradient

The conic-gradient() function generates a gradient with color transitions that are spun around a central point.

To create a conic gradient color from red to yellow to green, you can use the following code:

background-image: conic-gradient(red, yellow, green);

To create a conic gradient that starts from the center and goes to the edges of the element, you can use the following code:

background-image: conic-gradient(circle, red, yellow, green);

CSS gradient color palettes like checkerboards and pie charts can also create interesting effects. They can also be used to create responsive image effects, such as fading effects

Syntax of Linear Gradient

To make a linear gradient in CSS, use the linear-gradient() function. The following is the syntax for making a linear gradient:

background-image: linear-gradient(direction, color1, color2, ...);

direction: This option defines the beginning position, direction, and gradient effect. It may be defined as a keyword (to the top, bottom, left, or right) or an angle (45 degrees, 135 degrees, and so on).

color1, color2, and so on: These parameters include the gradient's color values. You may specify numerous color stops to create a seamless transition between hues.

Here's an example of a linear gradient that goes from red to yellow to blue and begins at the top:

background-image: linear-gradient(red, yellow, blue);

Composition of Linear Gradients

Linear gradients are gradients that feature a gradual transition of colors in distinct patterns. They are mainly used for backgrounds as an image. Before CSS gradients, developers had to employ pictures to generate similar effects, which had the major downside of slowing down the website’s speed. But using CSS gradients, the performance, as well as resolution, were both enhanced and simplified.

The W3C standards for linear CSS gradients are supported by the most recent versions of all the major browsers, making them a far more advantageous option because of their cross-browser compatibility. The following is the syntax for producing a linear gradient:

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

The direction parameter provides the gradient's direction, which may be in degrees, gradients, or keywords. The color-stop parameters define the gradient's color stops, which may be either a percentage or a color name/hex code.

Browser Support & Prefixes

According to Can I Use, as of June 2017, 93.75% of Internet traffic is on browsers that support unprefixed linear gradients (97.2% as of December 2022). However, earlier versions of specific browsers need vendor prefixes to allow linear gradients. The following prefixes are used for different browsers:

• -webkit- for Google Chrome (v 4-25) and Safari (v 4-6)
• -moz- for Firefox (v 3.6-15)
• -o- for Opera (v 11.5)
• filter for Internet Explorer (v 5.5-9)

For example, to build a linear gradient that is compatible with previous versions of Chrome and Safari, the following code may be used:

background-image: -webkit-gradient(linear, left bottom, right top, color-stop(0%, red), color-stop(100%, blue));

To create a linear gradient that is compatible with Internet Explorer, the following code can be used:

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF0000', endColorstr='#0000FF', GradientType=0);

IE filters

IE filters are a proprietary Microsoft technology that enables developers to add visual effects to HTML elements. One of the filters offered is the gradient filter, which may produce linear gradients in Internet Explorer (v 5.5-9). The syntax for utilizing the gradient filter is as follows:

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF0000', endColorstr='#0000FF', GradientType=0);

The startColorstr and endColorstr arguments provide the gradient's start and end colors, respectively. The GradientType option, which may be 0 (horizontal) or 1 (vertical), determines the kind of gradient.

Composition of Radial Gradients

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 130px;
  width: 220px;
  background-color:pink;
  background-image: radial-gradient(closest-side at 60% 55%, red, blue);
}
</style>
</head>
<body>

<h1>Radial Gradient - upGradTutorial</h1>

<div id="grad1"></div>

</body>
</html>

Composition of Conic Gradients

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 220px;
  width: 220px;
  background-color: blue; 
  background-image: conic-gradient(from 90deg, red, blue, green);
  border-radius: 50%;
}
</style>
</head>
<body>

<h1>Conic Gradient - upGradTutorial!</h1>

<div id="grad1"></div>

</body>
</html>

Composition of Repeating Gradients:

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 220px;
  background-image: repeating-linear-gradient(blue, yellow 10%, green 20%);
}
</style>
</head>
<body>

<h3>Repeating Linear Gradient in upGradTutorial!</h3>

<div id="grad1"></div>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 220px;
  width: 220px;
  background-color: red;
  background-image: repeating-conic-gradient(blue 10%, yellow 20%);
  border-radius: 50%;
}
</style>
</head>
<body>

<h1>Repeating Conic Gradient in upGradTutorial!</h1>

<div id="grad1"></div>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 220px;
  background-image: repeating-radial-gradient(blue, yellow 10%, green 15%);
}
</style>
</head>
<body>

<h3>Repeating Radial Gradient in upGradTutorial!</h3>

<div id="grad1"></div>

</body>
</html>

Improper Fallback Loading

<!DOCTYPE html>
<html>
<head>
<style>
img {
  display: block;
  font-family: sans-serif;
  font-weight: 300;
  height: auto;
  line-height: 2;
  position: relative;
  text-align: center;
  width: 100%;
}

img::before {
  content: "Sorry, this image is unavailable.";
  display: block;
  margin-bottom: 8px;
}

img::after {
  content: "(url: " attr(src) ")";
  display: block;
  font-size: 12px;
}
</style>
</head>
<body>
<h2>Rounded Image</h2>
<img src="paris.jpg" alt="Paris" width="300" height="300">
</body>
</html>

Customizing Gradients

Customizing gradients in CSS allows you to create unique and visually appealing backgrounds and effects for your web elements. Gradients can be customized by adjusting various parameters such as colors, positions, angles, and color stops. Here's a guide on how to customize gradients in CSS:

• Linear Gradients:

Linear gradients transition colors along a straight line. Here's an example of a linear gradient customized with different color stops:

.linear-gradient {
  width: 300px;
  height: 200px;
  background-image: linear-gradient(45deg, #ff0000, #00ff00, #0000ff);
}

In this example:

45deg sets the angle of the gradient to 45 degrees.

#ff0000, #00ff00, and #0000ff are color stops.

• Radial Gradients:

Radial gradients transition colors outward from a central point. Here's an example of a radial gradient customized with different shapes and color stops:

.radial-gradient {
  width: 200px;
  height: 200px;
  background-image: radial-gradient(circle, #ff9900, #ffffff 70%, #0099ff);
}

In this example:

circle sets the shape of the gradient to a circle.

#ff9900, #ffffff, and #0099ff are color stops.

70% specifies the point where the transition between colors occurs.

• Repeating Gradients:

Repeating gradients allow you to create patterns with repeated color transitions. Here's a customized example of a repeating linear gradient:

.repeating-linear {
  width: 300px;
  height: 200px;
  background-image: repeating-linear-gradient(45deg, #ff0000, #00ff00 20px, #0000ff 20px, #ffffff 40px);
   }

In this example:

45deg sets the angle of the gradient to 45 degrees.

#ff0000, #00ff00, #0000ff, and #ffffff are color stops.

20px defines the size of each stripe.

• Gradient Directions and Positions:

You can customize the direction and position of gradients. For example, a linear gradient can have directions like to top, to bottom, to left, or to right. A radial gradient can be positioned using keywords like center, top left, bottom right, etc.

.linear-top {
  background-image: linear-gradient(to top, #ff0000, #00ff00);
     }

.radial-center {
  background-image: radial-gradient(circle at center, #ff9900, #0099ff);
          }

• Transparency and Color Stops:

You can use transparent colors and adjust color stops to create smooth transitions and overlays.

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 220px;
  background-color: red; 
  background-image: linear-gradient(blue, yellow);
}
</style>
</head>
<body>

<h1>Linear Gradient in upGradTutorial!</h1>

<div id="grad1"></div>

</body>
</html>

Conclusion

You've now mastered the essentials of the Linear Gradient in CSS. From controlling the direction and defining color stops to creating complex, multi-color blends, you have the skills to add depth, flair, and professionalism to any web design. 

The true power of a Linear Gradient in CSS lies in its versatility. Whether you're creating a subtle overlay or a vibrant background, you are no longer limited to flat colors. Go experiment, get creative, and start building more beautiful and dynamic user interfaces today!

FAQs

1. How do you use a linear gradient in CSS color code? 

To create a Linear Gradient in CSS, you use the linear-gradient() function, typically on the background-image property. At a minimum, you must define at least two "color stops," which are the colors you want to transition between. You can also specify a direction or an angle for the gradient. For example, a simple gradient that goes from top to bottom would be background-image: linear-gradient(red, blue);. This is the foundational syntax for any Linear Gradient in CSS. 

2. What is a radial gradient in CSS? 

A radial gradient in CSS is a function that creates an image consisting of a progressive transition between two or more colors that radiate outwards from a central point. Unlike a linear gradient which proceeds in a straight line, a radial gradient emerges from a single point and spreads out in a circular or elliptical shape. You can control the shape, size, position of the center, and the color stops to create a wide variety of effects. 

3. What is a conic gradient in CSS? 

A conic gradient is a newer type of gradient where the color transitions are rotated around a center point, similar to the sweep of a radar screen or the colors on a pie chart. Unlike a radial gradient that radiates from the center outwards, a conic gradient's colors are arranged in a circle around the center point. This is useful for creating circular progress bars, color wheels, and other circular designs that are not easily achievable with a Linear Gradient in CSS. 

4. What are "color stops" in a CSS gradient? 

Color stops are the points along the gradient line where you define a specific color. In the linear-gradient() function, you can specify not only the color but also its position along the gradient line (using a percentage or a length value). For example, linear-gradient(red 0%, blue 100%) explicitly sets the start and end points. You can add multiple color stops to create a multi-colored gradient, like a rainbow. 

5. How do you control the direction of a Linear Gradient in CSS? 

You can control the direction of a Linear Gradient in CSS by specifying it as the first argument in the function. You can use keywords like to top, to bottom, to left, to right, and diagonal directions like to top right. Alternatively, for more precise control, you can specify an angle, such as 45deg, 90deg, or 180deg. If you don't specify a direction, it defaults to to bottom. 

6. What is a "color hint" in a gradient? 

A color hint is an optional parameter you can place between two color stops to control the midpoint of the color transition. By default, the midpoint between two colors is at the 50% mark between them. A color hint allows you to shift this transition point. For example, in linear-gradient(red, 10%, blue), the transition will be very sharp and happen close to the red color stop, creating a much different effect than a smooth blend. 

7. How can I create a gradient with transparency? 

You can create a gradient with transparency by using a color format that includes an alpha channel, such as rgba() or hsla(). The alpha channel controls the opacity of the color. For example, linear-gradient(rgba(255, 0, 0, 1), rgba(255, 0, 0, 0)) will create a fade effect from a fully opaque red to a fully transparent red. This is a very common technique for creating elegant overlays on images. 

8. What is a repeating linear gradient? 

A repeating linear gradient is created using the repeating-linear-gradient() function. It works just like a regular Linear Gradient in CSS, but the pattern of color stops you define will repeat itself indefinitely to fill the entire background. This is extremely useful for creating patterns like stripes without needing to use an image file. You must define the size of the repeating pattern for it to work. 

9. What is a text color gradient in CSS? 

A text CSS color gradient is a popular design technique where you apply a gradient to the text of an element instead of its background. This is achieved by first applying a background-image with the desired gradient, and then using the properties background-clip: text and color: transparent. This "clips" the background so that it is only visible through the text, creating a striking visual effect. 

10. What is a border gradient in CSS? 

A border gradient is a technique used to apply a gradient to the border of an element. While there is no direct border-gradient property, you can achieve this effect by using the border-image property with a Linear Gradient in CSS as the image source. Another common method is to use a slightly larger container with a gradient background and place the main element inside it with a solid background, creating the illusion of a gradient border. 

11. How do I create a hard-line stripe pattern with a linear gradient? 

You can create stripes with sharp, hard lines instead of a smooth blend by making the color stops adjacent to each other. For example, linear-gradient(red 50%, blue 50%) would create a hard line at the 50% mark with red on top and blue on the bottom. To create multiple stripes, you can define multiple adjacent color stops, for example: linear-gradient(red 0%, red 25%, blue 25%, blue 50%). 

12. Are CSS gradients supported by all browsers? 

Yes, modern CSS gradients (linear-gradient, radial-gradient, etc.) are widely supported by all major modern browsers, including Chrome, Firefox, Safari, and Edge. However, for older browser versions, you may need to use vendor prefixes (like -webkit- for older Chrome/Safari or -moz- for older Firefox) to ensure compatibility. It's always a good practice to check a resource like "Can I use..." for the most up-to-date compatibility information. 

13. How does the performance of a CSS gradient compare to using an image? 

For simple color transitions, using a CSS gradient is almost always more performant than using an image file. A CSS gradient is rendered by the browser's engine and does not require an additional HTTP request to download an image file, which reduces loading time. However, for very complex, repeating patterns, a small, optimized image file might sometimes be more performant than a highly complex repeating-linear-gradient(). 

14. Can I use CSS variables with gradients? 

Yes, you can and should use CSS custom properties (variables) to make your gradients more maintainable and reusable. You can define your brand colors as variables and then use them within your linear-gradient() function. For example: background-image: linear-gradient(var(--primary-color), var(--secondary-color));. This allows you to easily update your color scheme in one place. 

15. What is the difference between a linear-gradient as a background vs. a background-image? 

background-image is the specific property where you define the gradient function. background is a shorthand property that allows you to set multiple background-related properties in one line (like background-color, background-image, background-repeat, etc.). While you can use background: linear-gradient(...), it's often better to use background-image to be more explicit and to avoid unintentionally overriding other background properties. 

16. How can I create a gradient with more than two colors? 

To create a multi-color gradient, you simply add more color stops to the function, separated by commas. For example, to create a red, yellow, and blue gradient, you would write background-image: linear-gradient(red, yellow, blue);. The colors will be evenly spaced by default, but you can also specify their exact positions, like linear-gradient(red 0%, yellow 50%, blue 100%). 

17. What is the accessibility consideration for using gradients? 

The main accessibility consideration is ensuring that there is sufficient contrast between any text and the gradient background behind it. A gradient with both very light and very dark colors can make text difficult to read. You should test your text color against all parts of the gradient to ensure it meets WCAG contrast guidelines. This is especially important when creating a text gradient. 

18. How can I animate a CSS gradient? 

You cannot directly animate a linear-gradient using CSS transitions. However, a common technique is to make the gradient much larger than its container and then animate the background-position property. This creates the illusion of a moving or shifting gradient. For more complex animations, you can also use CSS @keyframes with background-position or background-size. 

19. How can I learn more about advanced CSS techniques like gradients? 

The best way to learn is through a combination of structured education and hands-on practice. A comprehensive program, like the full-stack development courses offered by upGrad, can provide a strong foundation in modern CSS and web design principles. You should also experiment on your own by building projects and using online tools like CSS gradient generators to see how different values affect the final result. 

20. What is the main benefit of using a Linear Gradient in CSS? 

The main benefit of using a Linear Gradient in CSS is that it allows you to create beautiful, dynamic, and complex background effects with a single line of code, without the need for an external image file. This reduces page load times, makes your designs more maintainable, and gives you a high degree of creative control over the visual appearance of your web pages. It is an essential tool for any modern web designer or developer.