Grow your CSS skills. Land your dream job.

Inset box-shadow question

  • # March 24, 2012 at 4:57 pm

    I am wondering if there is any way you can put an inset box-shadow on just three sides of a content area or does it have to be on all the sides.

    this is what I am using.


    -webkit-box-shadow: 1px 1px 250px #000000 inset;
    -moz-box-shadow: 1px 1px 250px #000000 inset;
    box-shadow: 1px 1px 250px #000000 inset;
    # March 24, 2012 at 5:23 pm

    Try this:


    -webkit-box-shadow: inset 1px 1px 250px #000000;
    -moz-box-shadow: inset 1px 1px 250px #000000;
    box-shadow: inset 1px 1px 250px #000000;
    # March 24, 2012 at 5:31 pm

    i gave the wrong code it’s this


    -webkit-box-shadow: inset 0 0 8px #000;
    -moz-box-shadow: inset 0 0 8px #000;
    box-shadow: inset 0 0 8px #000;
    # March 24, 2012 at 8:04 pm


    -webkit-box-shadow: inset 0 0 8px -8px#000;
    -moz-box-shadow: inset 0 0 8px -8px#000;
    box-shadow: inset 0 0 8px -8px #000;

    # March 24, 2012 at 8:05 pm

    There sure is, it involves a little more work though:

    box-shadow: inset -8px 0 8px -8px #000,
    inset 0 8px 8px -8px #000,
    inset 0 -8px 8px -8px #000;

    Example: http://dabblet.com/gist/2189699

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

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".