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 CSS3 Box and Text Shadow Effects?
To create CSS3 Box and Text Shadow effects, use the box-shadow and text-shadow property respectively. Let us understand them one by one with examples.
Text Shadow
To add shadow to text, use the text-shadow property. Let us see the syntax −
text-shadow: value
The above value can be the following −
h-shadow− Set the position of the horizontal shadow.
v-shadow− Set the position of the vertical shadow.
blur-radius− Set the blur radius.
color− Set the shadow color of the shadow.
Create a text shadow
Let us see an example to create a text shadow −
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
text-shadow: 2px 2px blue;
}
</style>
</head>
<body>
<h1>Demo Heading</h1>
<h2>Check the shadow of this text.</h2>
</body>
</html>
Create a text shadow with blur effect
Let us see an example to create a text shadow with blur effect. The 3rd parameter is set with the blur radius −
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
text-shadow: 2px 2px 5px blue;
}
</style>
</head>
<body>
<h1>Demo Heading</h1>
<h2>Check the shadow of this text with the blur effect.</h2>
</body>
</html>
Box Shadow
To set shadows to an element on a web page, use the box-shadow property. Let us see the syntax −
box-shadow: value
The above value can be the following −
h-offset− Set the horizontal offset of the shadow.
v-offset− Set the vertical offset of the shadow.
blur− Set the blur radius.
spread− Set the spread radius
color− Set the shadow color of the shadow.
Add box shadow
Let us see an example to add box shadow −
<!DOCTYPE html>
<html>
<head>
<style>
div {
color: white;
text-align: center;
width: 150px;
height: 150px;
background-color: red;
box-shadow: 8px 8px blue;
}
</style>
</head>
<body>
<h1>Shadow effect example</h1>
<div>
BOX SHADOW
</div>
</body>
</html>
Add box shadow with blur radius
Let us see an example to add box shadow with blur radius. The 3rd parameter is set with the blur radius −
<!DOCTYPE html>
<html>
<head>
<style>
div {
color: white;
text-align: center;
width: 150px;
height: 150px;
background-color: red;
box-shadow: 8px 2px 8px rgb(89, 0, 255);
}
</style>
</head>
<body>
<h1>Shadow effect example</h1>
<div>
BOX SHADOW
</div>
</body>
</html>
Add box shadow with blur and spread radius
Let us see an example to add box shadow with blur radius. The 3rd parameter is set with the blur radius and the 4th as spread radius −
<!DOCTYPE html>
<html>
<head>
<style>
div {
color: white;
text-align: center;
width: 150px;
height: 150px;
background-color: blue;
box-shadow: 8px 2px 8px 7px yellow;
}
</style>
</head>
<body>
<h1>Shadow effect example</h1>
<div>
BOX SHADOW
</div>
</body>
</html>
124 Views
