How can I add a shadow to actual screen frame on html?

Question

How can I add a shadow to actual screen frame on html on top of other content? If it's not possible then the same question for body frame.

This doesn't work:

body {
  -webkit-box-shadow: inset 0 0 10px #0d1f2b;
  -moz-box-shadow: inset 0 0 10px #0d1f2b;
  -o-box-shadow: inset 0 0 10px #0d1f2b;
  box-shadow: inset 0 0 10px #0d1f2b;
}

This shows a shadow on screen bounds but I can scroll it up by scrolling the content of the page:

.screen {
  position:absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  -webkit-box-shadow: inset 0 0 10px #0d1f2b;
  -moz-box-shadow: inset 0 0 10px #0d1f2b;
  -o-box-shadow: inset 0 0 10px #0d1f2b;
  box-shadow: inset 0 0 10px #0d1f2b;
}

  <div class="screen"></div>

Joao, unfortunately it doesn't work on iPad when keyboard is visible:( http://stackoverflow.com/questions/10659891/fixed-position-div-freezes-on-page-ipad — Dmitry, Oct 04 '13 at 09:31
check if this can help: http://stackoverflow.com/questions/7970389/ios-5-fixed-positioning-and-virtual-keyboard — Joao Palma, Oct 04 '13 at 09:34

score 0 · Answer 1 · edited May 23 '17 at 12:13

Thanks for Joao Palma's comment:

.screen {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  -webkit-box-shadow: inset 0 0 10px #0d1f2b;
  -moz-box-shadow: inset 0 0 10px #0d1f2b;
  -o-box-shadow: inset 0 0 10px #0d1f2b;
  box-shadow: inset 0 0 10px #0d1f2b;
}

  <div class="screen"></div>

Unfortunately it doesn't work on iPad when keyboard is visible:( Relative question: fixed position div freezes on page (iPad)

Hardik Bhalani · Accepted Answer · 2013-10-04T11:43:57.903

0

enter image description here body { -moz-box-shadow: 0 0 45px 45px rgba(50, 50, 50, 0.5);; -webkit-box-shadow: 0 0 45px 45px rgba(50, 50, 50, 0.5);; box-shadow: inset 0 0 15px 15px rgba(50, 50, 50, 0.5);; }

note :change values according to your requirement

edited Oct 04 '13 at 11:43

answered Oct 04 '13 at 09:22

Hardik Bhalani

863
2
8
24

its work in the case you scroll any div inside body of page..and I thought you want css for body not for your div...thats why provided solution... – Hardik Bhalani Oct 04 '13 at 11:19
But I don't see any shadow with the provided code for `body`. – Dmitry Oct 04 '13 at 11:22
1

see the image...if it is your case...I am getting shadow like this – Hardik Bhalani Oct 04 '13 at 11:44
Thanks. But it doesn't work on my page. Really don't know why yet. – Dmitry Oct 04 '13 at 11:51
you are trying in which browser...it might be not working in older browser..I guess.. – Hardik Bhalani Oct 04 '13 at 11:55
I found out that issue was caused by javascript logic and fixed it. But body shadow doesn't fill with a shadow the full screen:( – Dmitry Oct 04 '13 at 12:09
`min-height: 100%;` for body helps me! – Dmitry Oct 04 '13 at 12:19
Marked your answer as right but it works right only with `min-height: 100%;`. – Dmitry Oct 04 '13 at 12:20

How can I add a shadow to actual screen frame on html?

2 Answers2