Inset shadow effect

Question

How to make this inside shadow effect with CSS?

So far I got this http://jsfiddle.net/yX26J/. How to apply shadow only left and top?

Answer 1

I had this same issue the other day.

I'm pretty sure its not possible to define the 'top' 'left' 'bottom' 'right' which is a shame.

Answer 2

The key is to use inset. It's supported in all the recent versions of all the browsers that support box-shadow:

div.box {
  box-shadow: inset 10px 10px 10px #000000;
  -moz-box-shadow: inset 10px 10px 10px #000000;
  -webkit-box-shadow: inset 10px 10px 10px #000000;
}

This page cites the browser support: https://developer.mozilla.org/en/CSS/-moz-box-shadow

Answer 3

You can change the offset of the shadow with:

div {
    width:80px; height:110px;
    background:#3183bd;
    -moz-box-shadow: inset 1em 1em 1em -1em #111;
    -webkit-box-shadow: inset 1em 1em 1em -1em #111;
    box-shadow: inset 1em 1em 1em -1em #111;
}

http://jsfiddle.net/ga6cy/4/