CODEWITHSUNDEEP
css
pahnin
pahnin

Reputation: 5588

box-shadow both inset and outside on same div

Can't I have both box shadow inner and outer on the same div? I've tried but it doesn't work

http://jsfiddle.net/CWuw8/

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

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

Upvotes: 28

Views: 31976

Answers (3)

Misha Reyzlin
Misha Reyzlin

Reputation: 13896

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>

Upvotes: 58

Matijs
Matijs

Reputation: 3148

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>

Upvotes: 1

472084
472084

Reputation: 17885

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.

Upvotes: 5

Related Questions