518

How can I do this? I want my element to look as though it has a shadow underline. I don't want the shadow for the other 3 sides.

vba_user111
  • 215
  • 1
  • 15
WillingLearner
  • 7,106
  • 6
  • 34
  • 51
  • 1
    Try also [**this method**](http://stackoverflow.com/a/24698566/1677209) if you have monochromatic background – T30 Aug 01 '14 at 14:12

4 Answers4

1117

Do this: 

box-shadow: 0 4px 2px -2px gray;

It's actually much simpler, whatever you set the blur to (3rd value), set the spread (4th value) to the negative of it.

Shikkediel
  • 5,195
  • 16
  • 45
  • 77
Steve B
  • 11,226
  • 1
  • 15
  • 2
  • 9
    This is by far the best method. Pure css3, no hacks. – thelastshadow Nov 04 '11 at 16:15
  • 249
    Just in case anyone wants to understand why this works: * The first value sets the x-offset of the light source to 0. * The second value sets y-offset of the light source to +4. * The third value sets a blur effects of 2px. (Makes the shadow non-uniform). * The fourth value sets a spread to -2px. (Contract the shadow 2px.) This will cause the shadow to be 4px less wide than the element you're shadowing, so set the last value to 0 if you just want a plain underline. – Ceasar Jul 25 '12 at 19:17
  • 4
    It doesn't worked for me under firefox 18.X. What worked for me was: `box-shadow: inset 0 -4px 3px black;` But it also generates a little shadow on the sides.. :_( – elboletaire Feb 01 '13 at 19:59
  • 8
    however it does not work good for big (20px or more) shadows... :( – Shimon S Jun 04 '13 at 18:59
  • 1
    Similar to @elboletaire's solution, this worked for me: `box-shadow: inset 0 -2px 1px rgba(0, 0, 0, 0.3);` – Danny Beckett Oct 01 '13 at 09:56
  • This is a more realistic shadow example for left only or left and right : http://stackoverflow.com/a/20596554/1491212 Can be adapted to suit your needs. – Armel Larcier Jan 20 '14 at 13:09
  • why does the first number not have a `px` ? – ahnbizcad May 14 '14 at 10:30
  • @gwho - 0 is 0, regardless of the units, so adding 'px' is redundant. You can safely put 'px' after the zero (or 'pt' or '%' or any valid units) if you want. – Mike Fitzpatrick Jun 16 '14 at 05:15
  • so the choice to omit one here, and include one there was just arbitrary. good to know, thanks! – ahnbizcad Jun 16 '14 at 08:22
  • When using this under firefox, there will be a very slim line around the box that gets the shadow. You can fix this by increasing the spread to -3px instead of -2px, which of course reduces the bottom shadow some. – Hendrik Jul 17 '14 at 12:15
  • Hey OP, how about selecting this post as accepted answer? – Andres SK Feb 24 '15 at 18:23
  • 3
    @ahnbizcad Not fully arbitrary. `0` doesn't need a unit. Hence, adding a unit is redundant and wasting space. Not adding a unit is thus preferable. *However*: I often do add a unit to easy *changing* the value in the Object Inspector... But that's more of a debugging feature... My guess would be that most minifiers will drop the unit if the value is `0`. – Stijn de Witt Jul 28 '15 at 09:19
  • How about doing it just for the top, or left, or right sides ? Are there any such examples? Or what if you want all but top? – mjs Aug 11 '16 at 20:14
  • how about inner shadow? – AmiNadimi Mar 20 '18 at 20:24
  • it's too small. – shinzou Aug 26 '18 at 15:00
59

You can use two elements, one inside the other, and give the outer one overflow: hidden and a width equal to the inner element together with a bottom padding so that the shadow on all the other sides are "cut off"

#outer {
    width: 100px;
    overflow: hidden;
    padding-bottom: 10px;
}

#outer > div {
    width: 100px;
    height: 100px;
    background: orange;

    -moz-box-shadow: 0 4px 4px rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: 0 4px 4px rgba(0, 0, 0, 0.4);
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.4);
}

Alternatively, float the outer element to cause it to shrink to the size of the inner element. See: http://jsfiddle.net/QJPd5/1/

Yi Jiang
  • 49,435
  • 16
  • 136
  • 136
  • 1
    This solution is fantastic if you have to show the shadow for all the window-size. – JeanValjean Aug 24 '12 at 07:49
  • This is a solution that fits better the requirements of the question. It really spans the full bottom of the element. While, from my experience, the answer maked as correct displays a shadow slightly shorter than the bottom. – cbdeveloper Jul 26 '19 at 07:44
28

Try this 

-moz-box-shadow:0 5px 5px rgba(182, 182, 182, 0.75);
-webkit-box-shadow: 0 5px 5px rgba(182, 182, 182, 0.75);
box-shadow: 0 5px 5px rgba(182, 182, 182, 0.75);

You can see it in http://jsfiddle.net/wJ7qp/

Neri Barakat
  • 1,555
  • 20
  • 25
12

try this to get the box-shadow under your full control.

    <html>

    <head>
        <style> 
            div {
                width:300px;
                height:100px;
                background-color:yellow;
                box-shadow: 0 10px black inset,0 -10px red inset, -10px 0 blue inset, 10px 0 green inset;
           }
        </style>
    </head>
    <body>
        <div>
        </div>
    </body>

    </html>

this would apply to outer box-shadow as well.

Ajay Kulkarni
  • 2,900
  • 13
  • 48
  • 97
Saeed Tavoosi
  • 147
  • 1
  • 4