In this advance series of CSS tutorials, we will be learning how to create shadow effects on element content and box.
CSS Shadow Effect
In CSS we have two different properties to add shadow to text content or the element box.
-
text-shadow
-
box-shadow
CSS Text Shadow
With the help of
text-shadow
property, we can generate a shadow effect on the text content.
Syntax
{text-shadow: horizontal-shadow vertical-shadow;}
Example
<!DOCTYPE html>
<html>
<head>
<style>
p {
text-shadow: 2px 2px;
}
</style>
</head>
<body>
<p>Welcome to techgeekbuzz</p>
</body>
</html>
Add Color to shadow
We can also specify the color of the text's shadow, by putting a color value after horizontal and vertical length.
Syntax
{text-shadow: horizontal-shadow vertical-shadow color;}
Example
<!DOCTYPE html>
<html>
<head>
<style>
p {
text-shadow: 2px 2px red;
}
</style>
</head>
<body>
<p>Welcome to techgeekbuzz</p>
</body>
</html>
Shadow Blur Effect
Instead of showing the clear shadow, we can provide a blur effect on the shadow by specifying the blur value between color and horizontal parameters.
Syntax
{text-shadow: horizontal-shadow vertical-shadow blur color;}
Example
<!DOCTYPE html>
<html>
<head>
<style>
p {
text-shadow: 2px 2px 3px red;
}
</style>
</head>
<body>
<p>Welcome to techgeekbuzz</p>
</body>
</html>
Multiple Shadows
We can also specify multiple shadows to single text content. To do so we use the comma to separate two different
text-shadow
values. By providing multiple shadows we get a smoot beautiful glow shadow.
Syntax
{text-shadow: horizontal-shadow1 vertical-shadow1 blur1 color1, horizontal-shadow2 vertical-shadow2 blur2 color2 ;}
Example
<!DOCTYPE html>
<html>
<head>
<style>
p {
text-shadow: 2px 2px 3px red,2px 2px 3px yellow;
}
</style>
</head>
<body>
<p>Welcome to techgeekbuzz</p>
</body>
</html>
Border Around the text
Using the text-shadow property we can create an effect on which a plain border covers the text content.
Example
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: yellow;
text-shadow: -1px 0 red, 0 1px red, 1px 0 red, 0 -1px red;
}
</style>
</head>
<body>
<p>Welcome to techgeekbuzz</p>
</body>
</html>
Box Shadow
The
box-shadow
property applies the shadow effect on the element box. By using the box-shadow property we can create a 2-d effect on the element. And it accepts the same set of values like
text-shadow
property.
Syntax
{box-shadow: horizontal-shadow vertical-shadow color;}
Example
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 200px;
height: 50px;
color: white;
background-color: black;
box-shadow: 10px 10px grey;
}
</style>
</head>
<body>
<div class="box">Welcome to techgeekbuzz</div>
</body>
</html>
Create a Card using box-shadow Property
box-shadow
property is commonly used to create 2-D cards for the web pages.
Example
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 200px;
padding: 70px 0;
background-color: lightblue;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
text-align: center;
}
</style>
</head>
<body>
<div class="box">Welcome to techgeekbuzz</div>
</body>
</html>
Summary
-
There are two properties that can create shadow effects
box-shadow
,text-shadow
. -
The
text-shadow
property creates a shadow effect only on the text content of the element. -
The
box-shadow
property creates a shadow effect on the complete element box. - Both properties accept the same value and parameters.
-
box-shadow
property is commonly used for creating cards.