Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
Selected Reading
Using the CSS3 Linear and Radial Gradients
Gradients displays the combination of two or more colors. Linear gradients are used to arrange two or more colors in linear formats like top to bottom. Radial gradients appear at center.
Linear-Gradient
The linear gradient is set using the background-image property. The angle is set as the first parameter. 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
The following is the code for setting the direction of linear gradients using angles in CSS.
.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 a linear gradient for the background image
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>
Radial-Gradient
The radial gradient is set with the shape of an ellipse using the background-image property. The shape is set to ellipse −
background-image: radial-gradient(ellipse,rgb(217, 255, 0),rgb(255, 0, 0),rgb(14, 239, 255));
Example
Let us see the example −
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
#radial {
height: 200px;
width: 300px;
background-image: radial-gradient(ellipse,rgb(217, 255, 0),rgb(255, 0, 0),rgb(14, 239,
255));
}
</style>
</head>
<body>
<h1>Radial Gradient Shape Example</h1>
<div id="radial"></div>
</body>
</html>
Radial Gradient with shape of a circle
The radial gradient is set with the shape of a circle using the background-image property. The shape is set to circle −
background-image: radial-gradient(circle,cyan,orange,green);
Example
Let us see the example −
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
#radial {
height: 200px;
width: 300px;
background-image: radial-gradient(circle,cyan,orange,green);
}
</style>
</head>
<body>
<h1>Radial Gradient Shape Example</h1>
<div id="radial"></div>
</body>
</html>
Size of the radial gradient in pixels
For the gradient, we have set the size as 50px with the position center −
background-image: radial-gradient(40% 50px at center,rgb(30, 255, 0),rgb(0, 195, 255),rgb(128, 0, 32));
Example
Let us see the example −
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
#radial {
height: 200px;
width: 200px;
background-image: radial-gradient(40% 50px at center,rgb(30, 255, 0),rgb(0, 195,
255),rgb(128, 0, 32));
}
</style>
</head>
<body>
<h1>Radial Gradient Size Example</h1>
<div id="radial"></div>
</body>
</html>
Updated on: 2024-01-02T19:14:13+05:30
168 Views
Advertisements