Set both inset and outset box shadow using CSS

You need to separate them using a ,

div {
  margin: 50px;
  height: 100px;
  width: 100px;
  border: 1px solid #aaa;
  border-radius: 50%;
  box-shadow: inset 0 0 5px tomato, 0 0 5px black;
}
<div></div>

Demo

Demo 2 (Nothing different, but used white border for better indication)

So here in the above example, it sets the shadow inset with the tomato color, and the other set of rules separated using a comma is for outset i.e black shadow


You need to use comma to separate both shadows.

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

See demo

Tags:

Css