With CSS3, you can add drop shadow effects to elements just like in Photoshop, without needing any images. Before CSS3, we had to use sliced images to create shadows around elements, which was quite tedious.
The next section will explain how to apply shadows to text and elements.
box-shadow PropertyThe box-shadow property allows you to add shadows to element boxes. You can even apply multiple shadow effects using a comma-separated list of shadows. The basic syntax for creating a box shadow is:
The components of the box-shadow property are explained as follows:
Refer to the CSS3 box-shadow property to learn about other possible values.
.box{
width: 200px;
height: 150px;
background: #ccc;
box-shadow: 5px 5px 10px #999;
}Note: When adding the box-shadow, if the blur-radius component is not specified or is set to zero (0), the shadow's edges will be sharp.
Similarly, you can add multiple box shadows using a comma-separated list:
.box{
width: 200px;
height: 150px;
background: #000;
box-shadow: 5px 5px 10px red, 10px 10px 20px yellow;
}text-shadow PropertyThe text-shadow property allows you to add shadow effects to text. You can also add multiple shadows to text using the same format as the box-shadow property.
h1 {
text-shadow: 5px 5px 10px #666;
}
h2 {
text-shadow: 5px 5px 10px red, 10px 10px 20px yellow;
}