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!

FREE COURSES

Start Learning For Free

Slide 1 of 5

Object-Oriented Principles in Java

13k+ learners

12 hrs of learning

View Program

Enroll Now

Data Structures & Algorithm

35k+ learners

50 hrs of learning

View Program

Enroll Now

Core Java Basics

14k+ learners

23 hrs of learning

View Program

Enroll Now

Case Study using Tableau, Python and SQL

11k+ learners

10 hrs of learning

View Program

Enroll Now

Learn Basic Python Programming

43k+ learners

5 hrs of learning

View Program

Enroll Now

Explore All Free Courses