Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Setting the Location Color Stops using CSS
To create linear gradient, use the linear-gradient() method of the background-image property.
Syntax
The following is the syntax −
background-image: linear-gradient(angle, color-stop1, color-stop2);
The location at color stops can be set as a percentage or absolute length. For example, for linear gradient. The color stops are the colors you want to set for the smooth transitions −
background-image: linear-gradient( rgb(61, 255, 2) 40%, rgb(0, 174, 255) 80%, rgb(255, 29, 29) 20% );
The gradient can also be set on an image using the url() with linear-gradient() −
background-image: linear-gradient( rgba(185, 255, 243, 0.5), rgba(31, 12, 117, 0.5) ), url("https://www.tutorialspoint.com/assets/profiles/123055/profile/200_187394-1565938756.jpg");
The following are some examples for setting the location color stops in linear gradient using CSS −
Color stops evenly spaced
In this example, the color stops are evenly spaced with percentage −
background-image: linear-gradient( rgb(61, 255, 2), rgb(0, 174, 255), rgb(255, 29, 29) );
Example
Let us see the example −
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
div {
height: 100px;
background-image: linear-gradient(
rgb(61, 255, 2),
rgb(0, 174, 255),
rgb(255, 29, 29)
);
}
</style>
</head>
<body>
<h1>Linear gradient location color stops</h1>
<h3>Evenly Spaced</h3>
<div></div>
</body>
</html>
Color stops unevenly spaced
In this example, the color stops are unevenly spaced with percentage i.e.,
background-image: linear-gradient( rgb(61, 255, 2) 40%, rgb(0, 174, 255) 80%, rgb(255, 29, 29) 20% );
Example
Let us see the example −
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
div {
height: 100px;
background-image: linear-gradient(
rgb(61, 255, 2) 40%,
rgb(0, 174, 255) 80%,
rgb(255, 29, 29) 20%
);
}
</style>
</head>
<body>
<h1>Linear gradient location color stops</h1>
<h3>Unevenly Spaced</h3>
<div></div>
</body>
</html>
Set the color of the linear gradient
The following is the code for setting the direction of linear gradients using angles in CSS. The color stops are also set −
.linearGradient {
background-image: linear-gradient(90deg, rgb(255, 0, 200), yellow);
}
.linearGradient1 {
background-image: linear-gradient(-90deg, rgb(255, 0, 200), yellow);
}
Example
Here is the example −
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
div {
height: 200px;
width: 300px;
display: inline-block;
margin-right: 10px;
}
.linearGradient {
background-image: linear-gradient(90deg, rgb(255, 0, 200), yellow);
}
.linearGradient1 {
background-image: linear-gradient(-90deg, rgb(255, 0, 200), yellow);
}
</style>
</head>
<body>
<h1>Linear Gradient direction using angles</h1>
<div class="linearGradient"></div>
<div class="linearGradient1"></div>
</body>
</html>
Set the angle of the linear gradient with color stops
The angle of the linear gradient is set first, and then comes the color stops −
Spain:lang(es){
background-image: linear-gradient(red 25%, yellow 25%, yellow 75%, red 75%);
}
.Italy:lang(it){
background-image:linear-gradient(90deg, #00ae00 33.3%, white 33.3%, white 66.6%, red 66.6%);
}
.Germany:lang(nl){
background-image:linear-gradient(90deg, black 33.3%, yellow 33.3%, yellow 66.6%, red 66.6%);
}
Example
Here is the example −
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: 10px;
padding: 10px;
text-align: center;
border: 1px solid black;
}
.Italy:lang(it)::after {
padding: 20px;
content: '~ Italy';
font-style: italic;
}
.Spain:lang(es)::after {
padding: 8px;
content: '~ Spain';
font-style: italic;
}
.Germany:lang(nl)::after {
padding: 20px;
content: '~ Belgium';
font-style: italic;
}
.Spain:lang(es){
background-image: linear-gradient(red 25%, yellow 25%, yellow 75%, red 75%);
}
.Italy:lang(it){
background-image:linear-gradient(90deg, #00ae00 33.3%, white 33.3%, white 66.6%, red 66.6%);
}
.Germany:lang(nl){
background-image:linear-gradient(90deg, black 33.3%, yellow 33.3%, yellow 66.6%, red 66.6%);
}
</style>
</head>
<body>
<div class="Italy" lang='it'>Rome</div>
<div class="Germany" lang='nl'>Brussels</div>
<div class="Spain" lang='es'>Madrid</div>
</body>
</html>
Set a gradient for the background image with color stops
The linear gradient is set using the background-image property with the value linear-gradient(). The image is set using the url() −
background-image: linear-gradient( rgba(185, 255, 243, 0.5), rgba(31, 12, 117, 0.5) ), url("https://www.tutorialspoint.com/assets/profiles/123055/profile/200_187394-1565938756.jpg");
Example
Let us see the example −
<!DOCTYPE html>
<html>
<head>
<style>
body,
html {
height: 100%;
margin: 0;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
h1 {
font-size: 60px;
font-weight: bolder;
}
.heroContainer {
background-image: linear-gradient( rgba(185, 255, 243, 0.5), rgba(31, 12, 117, 0.5) ),
url("https://www.tutorialspoint.com/assets/profiles/123055/profile/200_187394-1565938756.jpg");
height: 50%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
.heroCaption {
text-align: center;
position: absolute;
top: 20%;
left: 45%;
color: white;
}
.heroCaption button {
border: none;
outline: none;
display: inline-block;
padding: 20px;
color: rgb(255, 255, 255);
opacity: 0.8;
font-size: 20px;
background-color: rgb(47, 151, 21);
text-align: center;
cursor: pointer;
}
.heroCaption button:hover {
opacity: 1;
}
</style>
</head>
<body>
<div class="heroContainer">
<div class="heroCaption">
<h1>I am Amit</h1>
<h2>And I'm an Entrepreneur</h2>
<button>Contact Me</button>
</div>
</div>
</body>
</html>
Updated on: 27-Dec-2023
112 Views
Advertisements
To Continue Learning Please Login