Advertisement

Advertisement


CSS3 Shadows

The CSS3 gives you ability to add shadow effects to the elements like in Photoshop. It is a very effective way to enhance the element's look in the webpage. Prior to CSS3, sliced images were used to create the shadows around the elements. There are many ways to create a shadow of different types of elements and text also.

CSS3 box-shadow Property

The box-shadow property is used to add shadow to the box shaped elements like div, etc. You can also add multiple shadow effects using a comma-separated list of shadows. Just use different colors for the shadows, different colors together will form a new colored shadow. Look at the syntax below to understand how to use this property and also try an example in the editor.

Syntax
box-shadow : offset-x offset-y blur-radius color;

Component of Box Shadow Property

Properties Description
offset-x It sets the horizontal offset of the shadow.
offset-y It sets the vertical offset of the shadow.
blur-radius It sets the blur radius, blurred shadow looks nicer than normal shadow look. The larger the value, more the edges will be blurred.
color It sets the color of the shadow. By default, if the color is not specified, it takes the value of the color property.

<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS3 Box Shadow Effect </title>
<meta charset="UTF-8">
<style>
.box{
width: 200px;
height: 150px;
background: #2247b7cc;
box-shadow: 5px 5px 10px #2247b7;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>

Output

CSS3 Box Shadow Effect
Note : If the value for the blur-radius component is not specified, or set to zero (0), the edges of the shadow will be sharp, it doesn't look nice as compared to blurred shadows.

Multiple effects box shadow

As stated earlier, you can add multiple box shadows to the same element. You can give different colors to each shadow and different sizes also, it's fun. Just add a comma(,) to separate the multiple shadow values. Have a look at the example below to understand how to use this multiple shadow property effectively :


<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS3 Multiple Box Shadow Effect </title>
<meta charset="UTF-8">
<style>
.box{
width: 200px;
height: 150px;
background: #2247b7cc;
box-shadow: 5px 5px 10px #2247b7;
}
.box1{
width: 200px;
height: 150px;
background: blueviolet;
box-shadow: 10px 5px 5px red;
}
.box2{
width: 200px;
height: 150px;
background: orange;
box-shadow: 60px -16px teal;
}
.box3{
width: 200px;
height: 150px;
background: gray;
box-shadow: 12px 12px 2px 1px rgba(0, 0, 255, .2);
}
</style>
</head>
<body>
<div class="box"></div><br> <br>
<div class="box1"></div><br><br>
<div class="box2"></div><br><br>
<div class="box3"></div>
</body>
</html>

Output

CSS3 Multiple Box Shadow Effect








CSS3 text-shadow Property

The text-shadow property is used to apply the shadow effect on text. It makes the text look very attractive. It is usually used in the headings. The multiple shadows can also be used in this property. Look at the example below to see the changes made by this property to the text.


<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS3 Text Shadow Effect </title>
<meta charset="UTF-8">
<style>
h1 {
text-shadow: 5px 5px 10px #c81818bd;
}
h2 {
text-shadow: 5px 5px 15px blue, 10px 10px 20px yellow;
}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
</body>
</html>

Output

CSS3 Text Shadow Effect

This is heading 1

This is heading 2










Become a Patron!

Note: If the updated content is not visible to you please refresh the cookies by pressing CTRL + Shift + R.