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
How to create a Gradient Shadow using CSS ?
As the web is evolving, fabricating beautiful UI is one of the most important jobs to increase customer engagement on websites. One of such ways to improve the look and feel of the frontend is by applying gradient shadow in CSS. Two of the most important ways to apply gradient shadows are linear gradient and radial gradient.
Gradient Shadows can be used to get user attention for a specific piece of information, apply hover or focus effects, or provide Web3 look and feel to the website. In this tutorial we are going to analyze both kinds of gradient shadows with hands−on examples.
We will utilize two important CSS concepts to get the effect, one is filter property and the other is ::after pseudo class. The pseudo class will be used to create a fake background whilethe filter property will be used to apply blur effect to the surrounding background.
Approach 1: Linear gradient shadow
In this example we are going to see how to apply linear gradient shadow effect on a card.
Syntax
.classname::after{
background: linear-gradient(direction, color1, [color2, color3.......]);
inset: -0.5rem;
filter: blur(25px);
.......
}
In this, classname refers to the assigned class to the given tag, direction attribute signifies in which direction the linear arrangement of colors should be laid out. This can be either provided in ‘deg’ or using pre designed strings like ‘to right’.
Algorithm
Step 1:reate html document skeleton of the website and assign a class name to the tag which requires gradient effect.
Step 2: Use the ::after pseudo class with the same class name as that assigned to the tag.
Step 3: Fill the background of the pseudo class with desired colors of the gradient using linear−gradient() CSS function.
Step 4: To make sure the pseudo class never superimposes on the original class, add the z−index property in pseudo class with value lower than that assigned to the original class.
Step 5: To the pseudo class add a little inset property so that the original class does not cover the background completely.
Step 6: Finally to apply gradient shadow effect apply blur to the pseudo component.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Linear Gradient Shadow</title>
</head>
<body>
<div class="gradient">
<h1>Welcome to Tutorials Point</h1>
</div>
<style>
*{
margin: 0px;
padding: 0px;
}
.gradient{
margin-top: 20px;
margin-left: 5%;
width: 90%;
position: relative;
border-radius: 10px;
padding-top: 15px;
padding-bottom: 15px;
padding-right: 10px;
padding-left: 10px;
background-color: black;
}
h1{
color: white;
text-align: center;
}
.gradient::after{
content: "";
position: absolute;
z-index: -100;
background: linear-gradient(to right, blue, cyan,lime, green, yellow, orange, red);
inset: -0.5rem;
filter: blur(25px);
}
</style>
</body>
</html>
Approach 2: Radial gradient shadow
In this example we are going to see how to apply radial gradient shadow effect to the same card effect and watch the changes.
Syntax
.classname::after{
background: radial-gradient(color1, [color2, color3.......]);
inset: -0.5rem;
filter: blur(25px);
.......
}
Algorithm
Step 1: Create html document skeleton of the website and assign a class name to the tag which requires gradient effect.
Step 2: Use the ::after pseudo class with the same class name as that assigned to the tag.
Step 3: Fill the background of the pseudo class with desired colors of the gradient using radial−gradient() CSS function.
Step 4: To make sure the pseudo class never superimposes on the original class, add the z−index property in pseudo class with value lower than that assigned to the original class.
Step 5: To the pseudo class add a little inset property so that the original class does not cover the background completely.
Step 6: Finally to apply gradient shadow effect apply blur to the pseudo component.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Radial Gradient Shadow</title>
</head>
<body>
<div class="gradient">
<h1>Welcome to Tutorials Point</h1>
</div>
<style>
*{
margin: 0px;
padding: 0px;
}
.gradient{
margin-top: 20px;
margin-left: 5%;
width: 90%;
position: relative;
padding-top: 50px;
padding-bottom: 50px;
border-radius: 10px;
padding-right: 10px;
padding-left: 10px;
background-color: black;
}
h1{
color: white;
text-align: center;
}
.gradient::after{
content: "";
position: absolute;
z-index: -100;
background: radial-gradient(yellow, red, blue);
inset: -1rem;
filter: blur(10px);
}
</style>
</body>
</html>
Conclusion
The radial gradient colors originate from the center of tag as can be seen from the above example that yellow color is totally superimposed by black background while some traces of red are found in mid points of sides of card. On the other hand, in linear gradient no superimposition is observed cause it distributes all colors equally along all sides based on provided direction.
We can also tweak with the values of inset and blur to increase or decrease the area to which the gradient effect ecompasses. With more negative value, the gradient will be more prominent while blur value makes the effect more spread out around the sides.
376 Views
