Is there a way to use two CSS3 box shadows on one element

Question

I m trying to replicate a button style in a Photoshop mock-up that has two shadows on it  The first shadow is an inner lighter box shadow  2px   and the second is a drop shadow outside the button  5px  itself     In Photoshop this is easy - Inner Shadow and Drop Shadow  In CSS I can apparently have one or the other  but not both at the same time   If you try the code below in a browser  you ll see that the box-shadow overrides the inset box-shadow   Here s the inset box shadow   box-shadow  inset 0 2px 0px  dcffa6    And this is what I would like for the drop shadow on the button   box-shadow  0 2px 5px  000    For context  here s my full button code  with gradients and all    button       outline  none      position  relative      width  160px      height  40px      font-family   Open Sans   sans-serif      color   fff      font-weight  800      font-size  12px      text-shadow  0px 1px 3px black       border-radius  3px      background-color   669900      background  -webkit-gradient linear  left top  left bottom  from  97cb52   to  669900        background  -moz-linear-gradient top   97cb52   669900       filter  progid DXImageTransform Microsoft gradient startColorstr   97cb52   endColorstr   669900        box-shadow  inset 0 2px 0px  dcffa6      box-shadow  0 2px 5px  000      border  1px solid  222      cursor  pointer

User · Accepted Answer

You can comma-separate shadows   box-shadow  inset 0 2px 0px  dcffa6  0 2px 5px  000

User · Answer

Box shadows can use commas to have multiple effects  just like with background images  in CSS3

[css] Is there a way to use two CSS3 box shadows on one element?

Examples related to css