box-shadow both inset and outside on same div

Using CSS3 you can have multple box shadows just by seperating them by commas eg:

box-shadow: 10px 10px 10px, 0 0 10px inset;

You can have as many as you want.


You need to use comma to separate both shadows: http://jsfiddle.net/gryzzly/CWuw8/3/

And you must also specify the color for your shadow in order for it to be seen.

div{
    top: 100px;
    position: absolute;
    left: 100px;
    height: 100px;
    width: 100px;
    box-shadow: 
        10px 10px 10px #000, 
        inset 0 0 10px #000;
    border-radius: 5px;
    background: white;
}

body{background: #d14343}
<div></div>

Added a runable code snippet:

div {
  top: 100px;
  position: absolute;
  left: 100px;
  height: 100px;
  width: 100px;
  box-shadow: 10px 10px 10px rgba(0, 0, 0, .5),
    0 0 10px rgba(255, 0, 0, .5) inset;
  border-radius: 5px;
  background: white;
}

body {
  background: #fff
}
<div></div>

Tags:

Css

Recent Posts