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
-
Economics & Finance
How to create CSS3 Box and Text Shadow Effects?
CSS3 provides powerful shadow effects through the text-shadow and box-shadow properties. These allow you to add depth and visual appeal to text and elements on your web page.
Text Shadow
The text-shadow property adds shadow effects to text elements. Let us see the syntax −
text-shadow: h-shadow v-shadow blur-radius color;
The parameters are −
h-shadow − Set the horizontal offset of the shadow
v-shadow − Set the vertical offset of the shadow
blur-radius − Set the blur radius (optional)
color − Set the shadow color (optional)
Basic Text Shadow
Let us see an example to create a basic text shadow −
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
font-size: 2rem;
text-shadow: 2px 2px blue;
}
</style>
</head>
<body>
<h1>Demo Heading</h1>
<h2>Check the shadow of this text.</h2>
</body>
</html>
A heading with blue shadow offset 2px horizontally and 2px vertically appears on the page.
Text Shadow with Blur Effect
The following example adds a blur radius for a softer shadow effect −
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
font-size: 2rem;
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>
A heading with a blurred blue shadow (5px blur radius) appears, creating a softer shadow effect.
Box Shadow
The box-shadow property adds shadow effects to elements. Let us see the syntax −
box-shadow: h-offset v-offset blur spread color;
The parameters are −
h-offset − Set the horizontal offset of the shadow
v-offset − Set the vertical offset of the shadow
blur − Set the blur radius (optional)
spread − Set the spread radius (optional)
color − Set the shadow color (optional)
Basic Box Shadow
Let us see an example to add a basic 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;
display: flex;
align-items: center;
justify-content: center;
margin: 20px;
}
</style>
</head>
<body>
<h1>Shadow effect example</h1>
<div>BOX SHADOW</div>
</body>
</html>
A red box with a blue shadow offset 8px horizontally and 8px vertically appears on the page.
Box Shadow with Blur
This example adds a blur radius for a softer shadow effect −
<!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);
display: flex;
align-items: center;
justify-content: center;
margin: 20px;
}
</style>
</head>
<body>
<h1>Shadow effect example</h1>
<div>BOX SHADOW</div>
</body>
</html>
A red box with a purple blurred shadow (8px blur radius) appears, creating a softer shadow effect.
Box Shadow with Spread
The following example includes both blur and spread radius parameters −
<!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;
display: flex;
align-items: center;
justify-content: center;
margin: 20px;
}
</style>
</head>
<body>
<h1>Shadow effect example</h1>
<div>BOX SHADOW</div>
</body>
</html>
A blue box with a yellow shadow that has both blur and spread effects appears, creating a larger, softer shadow.
Conclusion
CSS3 shadow effects using text-shadow and box-shadow properties are powerful tools for enhancing the visual appeal of your web pages. They allow you to create depth and dimension with customizable offset, blur, spread, and color options.
283 Views
