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 set the inset shadow using CSS?
Generally, we use the box-shadow property to apply shadow around any box or container. The box shadow property in CSS by default applies the shadow outside around the boundaries of the container. But we can also use the box shadow property to set the shadow inside the container as well.
Let us see how we can use the box shadow property to set the inner shadow to a container and make it look attractive.
Syntax
We can use the box shadow property with different number of values for different purposes as shown in the below syntax −
box-shadow: x-offset y-offset blur spread color | initial | inherit | inset
According to the syntax shown above, we can use the box shadow property with a value named inset. This inset property value allows us to style the box with inner shadow as well.
Let us now understand the use of the box shadow property to set the inner shadow by practically implementing it with the help of code example.
Steps
Step 1 − In the first step, we will define an outer parent div with a class associated with it.
Step 2 − In the next step, we will define two child elements with class associated with them inside the element defined in last step.
Step 3 − In the final step, we will grab the above defined div elements with their respective classes and apply the box shadow CSS as shown in the above syntax.
Example
The below example will help you understand the practical implementation of the box shadow property to apply inner shadow −
<!DOCTYPE html>
<html>
<head>
<style>
.outer-div{
display: flex;
border: 2px solid red;
box-shadow: 5px 5px 8px 0 green, -5px -5px 8px 0 green;
}
.inner-shadow{
border: 1px solid green;
margin: 5px;
padding: 10px;
box-shadow: inset 5px 5px 8px 0 rgba(0, 0, 0, 0.3), inset -5px -5px 10px 0 rgba(0, 0, 0, 0.3);
}
</style>
</head>
<body>
<center>
<h2>Setting the inset shadow using CSS</h2>
<p>The below div elements contain different type of box shadows. The main parent div contains the box shadow outside, while both of its child elements contain inner box shadow.</p>
<div class = "outer-div">
<div class = "inner-shadow">Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms.</div>
<div class = "inner-shadow">Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms.</div>
</div>
</center>
</body>
</html>
In the above example, we have used the box shadow property with and without the inset value. The shadow to the elements that contains the inset value will be set inside of that container while outside of the one which is not used with inset value.
Let us now discuss one more code example in which the inner box shadow will be clearly visible to the users.
Approach
The approach of this example is very much similar to the previous example. You just need to remove some of the CSS code that define the border around the all containers and the box shadow property that defines the shadow around the parent container.
Example
The below example will explain you the use of the box shadow property to set the inner shadow −
<!DOCTYPE html>
<html>
<head>
<style>
.outer-div{
display: flex;
background-color: #d0d0d0;
}
.inner-shadow{
margin: 5px;
padding: 10px;
border-radius: 5px;
box-shadow: inset 5px 5px 8px 0 rgba(0, 0, 0, 0.5), inset -5px -5px 10px 0 rgba(255, 255, 255, 0.8);
}
</style>
</head>
<body>
<center>
<h2>Set the inset shadow using CSS</h2>
<p>The below div elements contain different type of box shadows. The main parent div contains the box shadow outside, while both of its child elements contain inner box shadow.</p>
<div class = "outer-div">
<div class = "inner-shadow">Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms.</div>
<div class = "inner-shadow">Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms.</div>
</div>
</center>
</body>
</html>
In the above example, we have used the box shadow property only with the inset value which sets the inner box shadow to the child elements of the container. We have used the box shadow property with two comma separated values that defines the box shadow for top left and bottom right sides respectively.
Conclusion
In this article, we have learned about the inset shadow property in CSS. We have discussed the use of this property to set the inner shadow in details with the help of two different code examples. In both the examples, we have used the box shadow property with inset value which will set the given box shadow inside the container and change the default behaviour of setting the shadow outside.
56 Views
