How to create shadow in CSS3

In some cases you will prefer a design with text, images or other elements to contain some shadow effects. These elements, including the shadow, can be sliced after which they can be uploaded as an image to the website. This way of working nevertheless will create a large bunch of images which will negatively affect the loading time of your website, chasing away people and potential clients from your website to another website because of the long loading time. Alas, it’s impossible to create shadows in CSS 2.1 and if you would still like to use CSS 2.1 the previously mentioned image method will be the only solution. People using CSS3 nevertheless will be pleasantly surprised because CSS3 disposes of the useful box-shadow property. Alas again, the CSS3 box shadow property isn’t available for older browsers, consequently the layout of your website changes in for example IE8. In the below example we will show you how you can still make this property function properly in older browsers without using the classic image method:

To make sure the shadow property functions properly in Chrome, Safari, Firefox, Opera and Internet Explorer 9 you will need to use the following CSS3:

In the above example it becomes clear the box-shadow property consists of 4 different elements:

• 10px: This is the horizontal distance which can be assigned a positive or a negative value. To display the shadow at the right side of the element a positive value needs to be entered. Logically to display the shadow at the left side of the element a negative value needs to be entered.
• 20px: This is the vertical distance which can also be assigned a positive or a negative value. To display the shadow at the upper side of the element a positive value needs to be entered. Logically to display the shadow at the bottom side of the element a negative value needs to be entered.
• 30px: This is the blur radius, which determines if a shadow needs to be blurred or needs to be extremely sharp. To create a clear and extremely sharp shadow a value ‘0’ needs to be entered. The higher the value the more blurred your shadow will be.
• 5px: This is the spread radius, which determines the size of your shadow. If you would prefer the shadow to be as large as the blur a value ‘0’ needs to be entered. When a positive number is entered the shadow’s size will increase. When a negative number is entered the shadow’s size will decrease.
• #888: This part allows you to determine the shadow’s color.

Was this useful?