CSS drop shadow

The css drop shadow 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 css drop shadow of different types of elements and text also.

CSS box-shadow Property

The box shadow css 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 css 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.

Example Try this code »

<!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 :

Example Try this code »

<!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.

Example Try this code »

<!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

Recommended :

1 . What are CSS Selector ?
2 . How Tags are different from Attributes
3 . What is Wordwrap in CSS ?
4 . how to use CSS border

5 . How to make tooltip more Interactive using CSS
6 . Change property using Attribute Selector
7 . Photography Snippets using HTML and CSS
8 . Create Simple Login Form

Web Developement Courses
BootStrap Snippets
JS Keywords
Form Events
CSS Navbar
JS Objects
Cookies
Forms
Icons
Buttons
Progress
Footer
Errors