Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Applying shadow-effects with CSS

Saturday, March 9th, 2013 by Servage

Have you ever designed a website which used shadow effects for certain elements? For example a menu-box or a picture-frame, which should look like it has a shadow? This type of effect is very common on websites, and has previously often been achieved with using underlying graphics, like border or shadow images, which are included as bacground pictures, or maybe added around the desired item with a table structure.

The new CSS versions allow the browser to understand and render shadows itself. This relieves you of a lot of extra hassle, going through a graphics editor, and makes it more simple to use such effects. CSS becomes more powerful every day, and this is just one of the many things you can do :-)

Outer shadow effect

.shadow {
  -moz-box-shadow: 5px 5px 5px #cccccc;
  -webkit-box-shadow: 5px 5px 5px #cccccc;
  box-shadow: 5px 5px 5px #cccccc;

Inner shadow effect

.shadow {
   -moz-box-shadow:inset 0 0 10px #333333;
   -webkit-box-shadow:inset 0 0 10px #333333;
   box-shadow:inset 0 0 10px #333333;

Use CSS to make your website look good, and remember to always organize your CSS in an external stylesheet, rather than having the CSS code inline within your HTML document.

Applying shadow-effects with CSS, 3.5 out of 5 based on 2 ratings
Categories: Guides & Tutorials, Tips & Tricks


You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.