Creating Image Shadows Using CSS3

One of my personal favorite features in css3 is the use of box-shadows.

CSS (Cascading Style Sheets) is a style sheet language used to describe the look and formatting of your website. With a few quick lines in your style sheet document, we can create nice drop shadows for our html elements, like on the image above. Here’s your step-by-step guide:

  1. Back ‘Er up.

    Hold up! Before making any changes to your site, remember to back up your site. We know it’s a pain. Go on, do it anyway. Try using one of these handy plugins to automate the process.

  2. Open your Stylesheet file within your code editor.

    Your Stylesheet is usually named, “style.css.” If you’re not sure how to do this, click here (we recommend Editing Files Offline).

  3. Insert the code snippet.
    img {
        -webkit-box-shadow: 3px 3px 3px #7C7C7C;
        box-shadow: 3px 3px 3px #7C7C7C;
        }

    Copy the above code and paste it into your stylesheet. In this snippet we are targeting the img element and applying a box shadow with the following:

    Our attribute selector  is:  box-shadow
    And our properties are:  x-offset y-offset blur color

    An attribute selector helps you target what you want to change on the image element. The properties are standard pieces of the attribute selector that you can change or style.  In this case, you can change the direction of the shadow ( x-offset y-offset), how large the shadow is (blur), and the color of your shadow. Colors are represented by codes in your stylesheet. In this case, we are using the Hex color system.

  4. Upload your Stylesheet file to your site using FTP.

    If you’re not sure how to do this, click here.

  5. Refresh your site.

    Click the “Reload” button in your browser.

    Now, your images will have beautiful drop shadows.

  6. Finito!

    Close your laptop. There’s nothing more to do here.

Newsletter
Join over 280,000 independent website owners

The next person to join our monthly newsletter gets a 25% off coupon!

We guarantee 100% privacy. Your information will not be shared.

This entry was posted in . Bookmark the permalink.

14 thoughts on “Creating Image Shadows Using CSS3”

    1. No, if you go to your CSS file and add a new class it will work. For instance as Zane used just img, you could do something like

      #shadows img {

      -webkit-box-shadow: 3px 3px 3px #7C7C7C;

      box-shadow: 3px 3px 3px #7C7C7C;

      }
      Then in your HTML find the img tag and add Class=”shadows” to it.

      1. Hi Warprunner,

        Where in the html do you put Class=”shadows” ?

        My html currently looks like:

        Thank you in advance

      2. Actually, in your CSS, a CLASS would be prefixed with “.” and NOT “#”. You use “#” to reference an element’s ID. You also wouldn’t need to reference “img” in the CSS either because the class specification would take care of it.

        So the code should look like this instead:

        .shadows {

        -webkit-box-shadow: 3px 3px 3px #7C7C7C;

        box-shadow: 3px 3px 3px #7C7C7C;

        }

        So anything that has the class “shadows” assigned to it would be affected.

    2. just put

      -webkit-box-shadow: none; box-shadow: none

      for those class that you don’t want to shadow to be appear like Logo, widget etc..

    1. I have this problem too and how to fix it is go to your logo css class example mine is

      #logo img { display: block; max-width: 100%; }

      then you have to put the same code in this tutorial but change to “none” instead.

      so it would be something like this :

      #logo img { display: block; max-width: 100%; -webkit-box-shadow: none; box-shadow: none}

  1. Thank you. This is exactly what I am looking for! Now website have more beautiful img and I don’t have to go back to make a screen capture again to use a shadow effect. Your tutorial save my life. Thank you very much.

    Here is how it look like on my website if you want to see how I am so happy about it! http://wpthaiuser.com I also make a tutorial for normal user who want to make website by WordPress too. (I try to guide them without or very less code but now I learn to code too. At least css.)

    Thank you very much.
    Emily

Leave a Reply