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.

14 responses to “Creating Image Shadows Using CSS3”

  1. killemAll Avatar
    killemAll

    hell ow

  2. Henry Dunsmore Avatar
    Henry Dunsmore

    Unfortunately every image on your page gets a drop shadow. Not much use.

    1. Warprunner Avatar
      Warprunner

      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. Karl Avatar
        Karl

        Hi Warprunner,

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

        My html currently looks like:

        Thank you in advance

        1. mcjoejoe Avatar
          mcjoejoe

          You place the class specification within the tag.

      2. Bill Hawley Avatar
        Bill Hawley

        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. wpthaiuser Avatar
      wpthaiuser

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

  3. Reid Horton Avatar

    is there a way to disable it for only the logo image?

    1. wpthaiuser Avatar
      wpthaiuser

      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}

  4. ling maaki Avatar
    ling maaki

    More experiment with CSS image shadow

    http://www.corelangs.com/css/box/image-shadow.html

    css

  5. Jeff Hancock Avatar
    Jeff Hancock

    If the image has rounded corners, the shadow appears with a square corner.

  6. rainwilds Avatar
    rainwilds

    Thank you! Worked great!

  7. wpthaiuser Avatar
    wpthaiuser

    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

Your email address will not be published. Required fields are marked *