How to create linear gradient background using CSS ?
Last Updated :
15 May, 2023
In CSS, we can use the background-color property to set the background color of an element to a specific color. Sometimes we want to add more styling to the element when setting the background color by using the linear-gradient property. CSS linear-gradient property lets you display smooth transitions between two or more colors.
Syntax:
background-image: linear-gradient(direction, color1, color2, ...);
Parameters:
- direction: Specify the direction of the transition. The default value is 180deg (if not specified).
- color1: Specify the first color.
- color2: Specify the second color.
Note: You can specify as many colors as you want.
Example 1: In this example, we are using the above method.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
/* Remove the default padding and
margin of all HTML tags */
* {
margin: 0;
padding: 0;
}
/* Implementation of linear-gradient property */
#lin_grad {
/* Set the height of the div to
the entire screen */
height: 100vh;
/* linear-gradient syntax */
background-image: linear-gradient(lightblue, darkblue);
}
</style>
</head>
<body>
<div id="lin_grad"></div>
</body>
</html>
Output:

Example 2: This demonstrates the setting of direction. In the above HTML code, just change the "background-image" property value in the CSS part of the head section as given below.
Syntax:
background-image: linear-gradient(to right, lightblue, darkblue)
Example: Here we are following above explained approach.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
/* Remove the default padding and
margin of all HTML tags */
* {
margin: 0;
padding: 0;
}
/* Implementation of linear-gradient property */
#lin_grad {
/* Set the height of the div to
the entire screen */
height: 100vh;
/* linear-gradient syntax */
background-image: linear-gradient(to right, lightblue, darkblue)
}
</style>
</head>
<body>
<div id="lin_grad"></div>
</body>
</html>
Output:
Example 3: This demonstrates the setting of direction in degree. In the above HTML first code, just change the "background-image" property value in the CSS part of the head section as given below.
Syntax:
background-image: linear-gradient(135deg, white, lightgreen, darkblue);
Example: Here we are using the above syntax.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
/* Remove the default padding and
margin of all HTML tags */
* {
margin: 0;
padding: 0;
}
/* Implementation of linear-gradient property */
#lin_grad {
/* Set the height of the div to
the entire screen */
height: 100vh;
/* linear-gradient syntax */
background-image: linear-gradient(135deg, white, lightgreen, darkblue);
}
</style>
</head>
<body>
<div id="lin_grad"></div>
</body>
</html>
Output:

Example 4: This demonstrates the setting of the position for each color. If you don't specify the location of a color, it is placed halfway between its preceding color and the color that follows it. The two gradients given below are equivalent. In the above HTML first code, just change the "background-image" in the CSS part of the head section as given below.
Syntax:
background-image: linear-gradient(90deg, white, lightgreen, darkblue)
background-image: linear-gradient(90deg, white 0%,
lightgreen 50%, darkblue 100%)
HTML
<!DOCTYPE html>
<html>
<head>
<style>
/* Remove the default padding and
margin of all HTML tags */
* {
margin: 0;
padding: 0;
}
/* Implementation of linear-gradient property */
#lin_grad {
/* Set the height of the div to
the entire screen */
height: 100vh;
/* linear-gradient syntax */
background-image:
linear-gradient(90deg, white, lightgreen, darkblue)
background-image: linear-gradient(90deg, white 0%,
lightgreen 50%, darkblue 100%)
}
</style>
</head>
<body>
<div id="lin_grad"></div>
</body>
</html>
Output:

Let us change the % value of the light green color and see what happens.
Syntax:
background-image: linear-gradient(90deg, white 0%,
lightgreen 80%, darkblue 100%)
Example:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
/* Remove the default padding and
margin of all HTML tags */
* {
margin: 0;
padding: 0;
}
/* Implementation of linear-gradient property */
#lin_grad {
/* Set the height of the div to
the entire screen */
height: 100vh;
/* linear-gradient syntax */
background-image: background-image: linear-gradient(90deg, white 0%,
lightgreen 80%, darkblue 100%)
}
</style>
</head>
<body>
<div id="lin_grad"></div>
</body>
</html>
Output:

Similar Reads
JavaScript Tutorial JavaScript is a programming language used to create dynamic content for websites. It is a lightweight, cross-platform, and single-threaded programming language. It's an interpreted language that executes code line by line, providing more flexibility.JavaScript on Client Side: On the client side, Jav
11 min read
Web Development Web development is the process of creating, building, and maintaining websites and web applications. It involves everything from web design to programming and database management. Web development is generally divided into three core areas: Frontend Development, Backend Development, and Full Stack De
5 min read
React Interview Questions and Answers React is an efficient, flexible, and open-source JavaScript library that allows developers to create simple, fast, and scalable web applications. Jordan Walke, a software engineer who was working for Facebook, created React. Developers with a JavaScript background can easily develop web applications
15+ min read
React Tutorial React is a powerful JavaScript library for building fast, scalable front-end applications. Created by Facebook, it's known for its component-based structure, single-page applications (SPAs), and virtual DOM,enabling efficient UI updates and a seamless user experience.Note: The latest stable version
7 min read
JavaScript Interview Questions and Answers JavaScript is the most used programming language for developing websites, web servers, mobile applications, and many other platforms. In Both Front-end and Back-end Interviews, JavaScript was asked, and its difficulty depends upon the on your profile and company. Here, we compiled 70+ JS Interview q
15+ min read
Domain Name System (DNS) DNS is a hierarchical and distributed naming system that translates domain names into IP addresses. When you type a domain name like www.geeksforgeeks.org into your browser, DNS ensures that the request reaches the correct server by resolving the domain to its corresponding IP address.Without DNS, w
8 min read
HTML Interview Questions and Answers HTML (HyperText Markup Language) is the foundational language for creating web pages and web applications. Whether you're a fresher or an experienced professional, preparing for an HTML interview requires a solid understanding of both basic and advanced concepts. Below is a curated list of 50+ HTML
14 min read
NodeJS Interview Questions and Answers NodeJS is one of the most popular runtime environments, known for its efficiency, scalability, and ability to handle asynchronous operations. It is built on Chromeâs V8 JavaScript engine for executing JavaScript code outside of a browser. It is extensively used by top companies such as LinkedIn, Net
15+ min read
Top 10 Projects For Beginners To Practice HTML and CSS Skills Learning to code is an exciting journey, especially when stepping into the world of programming with HTML and CSSâthe foundation of every website you see today. For most beginners, these two building blocks are the perfect starting point to explore the creative side of web development, designing vis
8 min read
Web Development Technologies Web development refers to building, creating, and maintaining websites. It includes aspects such as web design, web publishing, web programming, and database management. It is the creation of an application that works over the internet, i.e., websites.To better understand the foundation of web devel
7 min read