How to have div box shadow to go fully right and down side with top clear?

Question

box-shadow: 0 0 0 10000px rgba(0,0,0,0.65);

If this box-shadow css applied to DIV, div will be only visible on page, and other thing go under shadow. Is there a possibility, to apply box-shadow that goes 100% or fully to right and bottom only, without going above or top at all?

Answer 1

Like this:

.box {
 margin:100px auto;
 width:200px;
 height:200px;
 border:2px solid green;
 background:red;
 box-shadow:1000px 1000px 0 1000px #000;
}

<div class="box"></div>

Or like this for the left part:

.box {
 margin:100px auto;
 width:200px;
 height:200px;
 border:2px solid green;
 background:red;
 box-shadow:-1000px 1000px 0 1000px #000;
}

<div class="box"></div>

To make sure you will always cover the whole screen better consider vh vw unit. Since we cannot have the max between 100vh or 100vw simply use 100vh + 100vw

.box {
 margin:100px auto;
 width:200px;
 height:200px;
 border:2px solid green;
 background:red;
 box-shadow:calc(100vh + 100vw) calc(100vh + 100vw) 0 calc(100vh + 100vw) #000;
}

<div class="box"></div>

For the left:

.box {
 margin:100px auto;
 width:200px;
 height:200px;
 border:2px solid green;
 background:red;
 box-shadow:calc(-1 * (100vh + 100vw)) calc(100vh + 100vw) 0 calc(100vh + 100vw) #000;
}

<div class="box"></div>

Answer 2

div {
  width: 100px;
  height: 100px;
  background-color: yellow;
  box-shadow: 100px 100px 0 100px rgba(0,0,0,1);
  }

<p> lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem 
</p>
<div></div>

Answer 3

Style it as you prefer from here and after copy it ;)

https://www.cssmatic.com/box-shadow

or

https://css3gen.com/box-shadow/