Efficient CSS3 Long Shadows on div with rounded corners

Question

I currently create long shadows in CSS with a code similar to the following:

box-shadow: 1px 1px #481111,
2px 2px #491111,
3px 3px #491111,
4px 4px #4a1111,
5px 5px #4a1111,
6px 6px #4b1111,
7px 7px #4b1111,
8px 8px #4c1212,
9px 9px #4c1212,
...
200px 200px #b42b2b;

Now the problem is, that by having a big long-shadow (200px), many less powerful devices like mobile phones or older computers can not handle these shadows, without lagging. I was searching for an alternative to this method of doing long-shadows online, but couldn't find a different one.

The element this shadow is applied on looks similar to this:

(div has border-radius of 5px)

body {
  background-color: #b42b2b
}
.main {
  width: 500px;
  height: 300px;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 1px 1px #481111, 2px 2px #491111, 3px 3px #491111, 4px 4px #4a1111, 5px 5px #4a1111, 6px 6px #4b1111, 7px 7px #4b1111, 8px 8px #4c1212, 9px 9px #4c1212, 10px 10px #4d1212, 11px 11px #4d1212, 12px 12px #4e1212, 13px 13px #4f1212, 14px 14px #4f1212, 15px 15px #501212, 16px 16px #501313, 17px 17px #511313, 18px 18px #511313, 19px 19px #521313, 20px 20px #521313, 21px 21px #531313, 22px 22px #531313, 23px 23px #541313, 24px 24px #541414, 25px 25px #551414, 26px 26px #561414, 27px 27px #561414, 28px 28px #571414, 29px 29px #571414, 30px 30px #581414, 31px 31px #581515, 32px 32px #591515, 33px 33px #591515, 34px 34px #5a1515, 35px 35px #5a1515, 36px 36px #5b1515, 37px 37px #5b1515, 38px 38px #5c1515, 39px 39px #5d1616, 40px 40px #5d1616, 41px 41px #5e1616, 42px 42px #5e1616, 43px 43px #5f1616, 44px 44px #5f1616, 45px 45px #601616, 46px 46px #601616, 47px 47px #611717, 48px 48px #611717, 49px 49px #621717, 50px 50px #631717, 51px 51px #631717, 52px 52px #641717, 53px 53px #641717, 54px 54px #651818, 55px 55px #651818, 56px 56px #661818, 57px 57px #661818, 58px 58px #671818, 59px 59px #671818, 60px 60px #681818, 61px 61px #681818, 62px 62px #691919, 63px 63px #6a1919, 64px 64px #6a1919, 65px 65px #6b1919, 66px 66px #6b1919, 67px 67px #6c1919, 68px 68px #6c1919, 69px 69px #6d1919, 70px 70px #6d1a1a, 71px 71px #6e1a1a, 72px 72px #6e1a1a, 73px 73px #6f1a1a, 74px 74px #6f1a1a, 75px 75px #701a1a, 76px 76px #711a1a, 77px 77px #711b1b, 78px 78px #721b1b, 79px 79px #721b1b, 80px 80px #731b1b, 81px 81px #731b1b, 82px 82px #741b1b, 83px 83px #741b1b, 84px 84px #751b1b, 85px 85px #751c1c, 86px 86px #761c1c, 87px 87px #761c1c, 88px 88px #771c1c, 89px 89px #781c1c, 90px 90px #781c1c, 91px 91px #791c1c, 92px 92px #791c1c, 93px 93px #7a1d1d, 94px 94px #7a1d1d, 95px 95px #7b1d1d, 96px 96px #7b1d1d, 97px 97px #7c1d1d, 98px 98px #7c1d1d, 99px 99px #7d1d1d, 100px 100px #7e1e1e, 101px 101px #7e1e1e, 102px 102px #7f1e1e, 103px 103px #7f1e1e, 104px 104px #801e1e, 105px 105px #801e1e, 106px 106px #811e1e, 107px 107px #811e1e, 108px 108px #821f1f, 109px 109px #821f1f, 110px 110px #831f1f, 111px 111px #831f1f, 112px 112px #841f1f, 113px 113px #851f1f, 114px 114px #851f1f, 115px 115px #861f1f, 116px 116px #862020, 117px 117px #872020, 118px 118px #872020, 119px 119px #882020, 120px 120px #882020, 121px 121px #892020, 122px 122px #892020, 123px 123px #8a2020, 124px 124px #8a2121, 125px 125px #8b2121, 126px 126px #8c2121, 127px 127px #8c2121, 128px 128px #8d2121, 129px 129px #8d2121, 130px 130px #8e2121, 131px 131px #8e2222, 132px 132px #8f2222, 133px 133px #8f2222, 134px 134px #902222, 135px 135px #902222, 136px 136px #912222, 137px 137px #912222, 138px 138px #922222, 139px 139px #932323, 140px 140px #932323, 141px 141px #942323, 142px 142px #942323, 143px 143px #952323, 144px 144px #952323, 145px 145px #962323, 146px 146px #962323, 147px 147px #972424, 148px 148px #972424, 149px 149px #982424, 150px 150px #992424, 151px 151px #992424, 152px 152px #9a2424, 153px 153px #9a2424, 154px 154px #9b2525, 155px 155px #9b2525, 156px 156px #9c2525, 157px 157px #9c2525, 158px 158px #9d2525, 159px 159px #9d2525, 160px 160px #9e2525, 161px 161px #9e2525, 162px 162px #9f2626, 163px 163px #a02626, 164px 164px #a02626, 165px 165px #a12626, 166px 166px #a12626, 167px 167px #a22626, 168px 168px #a22626, 169px 169px #a32626, 170px 170px #a32727, 171px 171px #a42727, 172px 172px #a42727, 173px 173px #a52727, 174px 174px #a52727, 175px 175px #a62727, 176px 176px #a72727, 177px 177px #a72828, 178px 178px #a82828, 179px 179px #a82828, 180px 180px #a92828, 181px 181px #a92828, 182px 182px #aa2828, 183px 183px #aa2828, 184px 184px #ab2828, 185px 185px #ab2929, 186px 186px #ac2929, 187px 187px #ac2929, 188px 188px #ad2929, 189px 189px #ae2929, 190px 190px #ae2929, 191px 191px #af2929, 192px 192px #af2929, 193px 193px #b02a2a, 194px 194px #b02a2a, 195px 195px #b12a2a, 196px 196px #b12a2a, 197px 197px #b22a2a, 198px 198px #b22a2a, 199px 199px #b32a2a, 200px 200px #b42b2b
}

<div class="main">


</div>

Background color is: #b42b2b

Darkest point of shadow is around: rgba(0,0,0,60%)

Answer 1

You can do this with pseudo-elements, linear gradients, and transforms.

Without rounded corners:

body { 
  background: #b42b2b;
}

div {
  width: 300px;
  height: 100px;
  background: white;
  position: relative;
}

div:before {
  position: absolute;
  top: 0;
  left: 100%;
  width: 100px;
  height: 100px;
  content: '';
  background: linear-gradient(to right, rgba(0,0,0,0.6), transparent);
  transform: skewY(45deg);
  transform-origin: 0 0;
}

div:after {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 100px;
  content: '';
  background: linear-gradient(180deg, rgba(0,0,0,0.6), transparent);
  transform: skewX(45deg);
  transform-origin: 0 0;
}

<div></div>

---

Update

Rounded corners take a little more finesse as you have to position the before/after pseudo elements in just the right place to keep holes from showing in the corners and prevent the shadows from overlapping. A preprocessor such as LESS/SASS can definitely ease the math required to get it right.

With rounded corners:

body { 
  background: #b42b2b;
}

div {
  width: 300px;
  height: 100px;
  background: white;
  position: relative;
  border-radius: 5px;
}

div:before {
  z-index: -1;
  position: absolute;
  top: 1px;
  left: calc(100% - 2.5px);
  width: 100px;
  height: calc(100% - 3.5px);
  content: '';
  background: linear-gradient(to right, rgba(0,0,0,0.6), transparent);
  transform: skewY(45deg);
  transform-origin: 0 0;
}

div:after {
  z-index: -1;
  position: absolute;
  top: calc(100% - 2.5px);
  left: 1px;
  width: calc(100% - 3.5px);
  height: 100px;
  content: '';
  background: linear-gradient(180deg, rgba(0,0,0,0.6), transparent);
  transform: skewX(45deg);
  transform-origin: 0 0;
}

<div></div>