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 set the shadow color of div using CSS?
The task we are going to perform in this article is to set the shadow color of a <div> using CSS. Like every object we can observe has a shadow, we can also make any color a shadow for the <div> element by using CSS. You have probably seen several special effects while browsing the majority of websites.
Let's get a better understanding on creating a shadow color of <div> using CSS further in this article. This can be done by using the box-shadow property.
CSS box-shadow property
In CSS, the box-shadow property is used to give an element's frames a shadow-like appearance. The element's frame, which is separated from it by a comma, is subject to the various effects. The box-shadow can be characterize using X and Y offsets relative to the element, blur and spread radius, and color.
Syntax
Following is the syntax for CSS box shadow property.
box-shadow: h-offset v-offset blur spread color |none|inset|initial| inherit;
Let's jump into the example, for getting more idea on setting a shadow color of <div> using the CSS.
Example
In the following example we are going to use the specify the horizontal and vertical shadow.
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 350px;
height: 124px;
padding: 10px;
background-color: #D2B4DE;
box-shadow: 12px 13px;
}
</style>
</head>
<body>
<div>Mahendra Singh Dhoni, commonly known as MS Dhoni, is a former Indian cricketer and captain of the Indian national team in limited-overs formats from 2007 to 2017 and in Test cricket from 2008 to 2014, who plays as a Wicket-keeper-Batsman.</div>
</body>
</html>
When we execute the above program, it will generate an output consisting of div text applied with a horizontal and vertical shadow.
Example
Consider the following example, where we are going to specify the color to form a shadow.
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 310px;
height: 110px;
padding: 12px;
background-color: #E5E7E9;
box-shadow: 11px 12px #BB8FCE;
}
</style>
</head>
<body>
<div>Virat Kohli is an Indian international cricketer and the former captain of the Indian national cricket team who plays as a right-handed batsman for Royal Challengers Bangalore in the IPL and for Delhi in Indian domestic cricket.</div>
</body>
</html>
On running the above code, the output window will pop up, displaying the text on the webpage with an applied shadow.
Example
Following is an example where we are going to use the blur parameter to define the blur radius. The higher the number, the more blurred the shadow.
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 310px;
height: 90px;
padding: 13px;
background-color: #D1F2EB;
box-shadow: 9px 12px 6px #5B2C6F;
}
</style>
</head>
<body>
<div>The lion is a large cat of the genus Panthera native to Africa and India. It has a muscular, broad-chested body; short, rounded head; round ears; and a hairy tuft at the end of its tail. </div>
</body>
</html>
When we execute the above code, it will generate an output consisting of text along with an applied blur shadow on the webpage.
Example
Let's consider the following: we are going to use the spread radius of the shadow, which results in an increase in the size of the shadow if the value is positive, or else it will decrease the size of the shadow if the value is negative.
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 310px;
height: 90px;
padding: 15px;
background-color: #D1F2EB;
box-shadow: 12px 9px 7px 10px #DFFF00;
}
</style>
</head>
<body>
<div>The dog is a domesticated descendant of the wolf. Also called the domestic dog, it is derived from the extinct Pleistocene wolf, and the modern wolf is the dog's nearest living relative.</div>
</body>
</html>
On running the above code, the output window will pop up, displaying the text along with the increase in the size of the shadow, as we have mentioned the spread radius with a positive value.
115 Views
