Treehouse: Grow your CSS skills. Land your dream job.

CSS box-shadow: Inner Shadow on the right

  • # April 22, 2012 at 3:54 pm

    I have been trying to search and find a way to make a shadow and only have it on the right side of the box. How would you go about doing this with box-shadow or is it even possible?


    # April 22, 2012 at 7:03 pm

    The trick is to use a negative spread value:

    # April 22, 2012 at 7:39 pm

    That worked great! Could you maybe point me in the right direction on why that worked? I thought it could be done but was not sure how to visualize the shadows.

    # April 22, 2012 at 7:44 pm

    Here is a breakdown:

    Feel free to play around with the values so that you understand what they do.

    # April 22, 2012 at 9:46 pm

    Awesome! Thanks. I do have another question with the box shadow. How can I make it so it only shows the top and bottom shadows? I have this which kind of works but doesn’t still has some ‘bleed’ on the left and right:

    box-shadow: 0px 5px 5px 0 #333, 0px -5px 5px 0 #333;
    # April 22, 2012 at 9:50 pm

    I actually just lowered the amount of ‘bleed’ on the right by using:

    box-shadow: -3px 5px 5px -3px #333, -3px -5px 5px -3px #333;

    But still has some on the left.

    # April 22, 2012 at 9:50 pm

    Make sure to increase the offset to account for the negative spread:

    # April 22, 2012 at 9:52 pm

    Oh ok good, I am on the right path then, just need to play with it more.


    # April 22, 2012 at 9:53 pm

    No worries!

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.