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