EffectHub.com: your best source for gaming

Recommendation

More Effects...

CSS

body {
  background: #222;
}

.container {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.window {
  position: absolute;
  width: 100vw;
  height: 100vh;
  background: url("http://i.imgur.com/xQdYC7x.jpg");
  background-size: cover;
  background-position: 50%;
  -webkit-filter: blur(10px);
          filter: blur(10px);
}

.raindrops,
.borders,
.drops {
  position: absolute;
}

.drops {
  -webkit-filter: brightness(1.2);
          filter: brightness(1.2);
}

.raindrop {
  position: absolute;
  border-radius: 100%;
  background-image: url("http://i.imgur.com/xQdYC7x.jpg");
  background-size: 5vw 5vh;
  background-position: 50%;
  -webkit-transform: rotate(180deg) rotateY(0);
          transform: rotate(180deg) rotateY(0);
}

.border {
  position: absolute;
  margin-left: 2px;
  margin-top: 1px;
  border-radius: 100%;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.5);
  -webkit-transform: rotateY(0);
          transform: rotateY(0);
}

.raindrop:nth-child(1) {
  left: 82.67201vw;
  top: 36.58251vh;
  width: 11px;
  height: 9.28109px;
  background-position: 82.67201% 36.58251%;
}

.border:nth-child(1) {
  left: 82.67201vw;
  top: 36.58251vh;
  width: 7px;
  height: 9.28109px;
}

.raindrop:nth-child(2) {
  left: 18.14628vw;
  top: 27.78896vh;
  width: 13px;
  height: 11.85321px;
  background-position: 18.14628% 27.78896%;
}

.border:nth-child(2) {
  left: 18.14628vw;
  top: 27.78896vh;
  width: 9px;
  height: 11.85321px;
}

.raindrop:nth-child(3) {
  left: 96.26443vw;
  top: 64.16349vh;
  width: 10px;
  height: 11.75286px;
  background-position: 96.26443% 64.16349%;
}

.border:nth-child(3) {
  left: 96.26443vw;
  top: 64.16349vh;
  width: 6px;
  height: 11.75286px;
}

.raindrop:nth-child(4) {
  left: 84.02231vw;
  top: 34.63491vh;
  width: 13px;
  height: 13.90661px;
  background-position: 84.02231% 34.63491%;
}

.border:nth-child(4) {
  left: 84.02231vw;
  top: 34.63491vh;
  width: 9px;
  height: 13.90661px;
}

.raindrop:nth-child(5) {
  left: 63.0985vw;
  top: 17.9545vh;
  width: 11px;
  height: 8.10414px;
  background-position: 63.0985% 17.9545%;
}

.border:nth-child(5) {
  left: 63.0985vw;
  top: 17.9545vh;
  width: 7px;
  height: 8.10414px;
}

.raindrop:nth-child(6) {
  left: 98.98115vw;
  top: 97.46736vh;
  width: 7px;
  height: 5.19287px;
  background-position: 98.98115% 97.46736%;
}

.border:nth-child(6) {
  left: 98.98115vw;
  top: 97.46736vh;
  width: 3px;
  height: 5.19287px;
}

.raindrop:nth-child(7) {
  left: 90.40901vw;
  top: 29.11556vh;
  width: 6px;
  height: 5.47207px;
  background-position: 90.40901% 29.11556%;
}

.border:nth-child(7) {
  left: 90.40901vw;
  top: 29.11556vh;
  width: 2px;
  height: 5.47207px;
}

.raindrop:nth-child(8) {
  left: 71.02291vw;
  top: 29.64288vh;
  width: 16px;
  height: 15.88385px;
  background-position: 71.02291% 29.64288%;
}

.border:nth-child(8) {
  left: 71.02291vw;
  top: 29.64288vh;
  width: 12px;
  height: 15.88385px;
}

.raindrop:nth-child(9) {
  left: 39.95424vw;
  top: 93.16vh;
  width: 16px;
  height: 15.63425px;
  background-position: 39.95424% 93.16%;
}

.border:nth-child(9) {
  left: 39.95424vw;
  top: 93.16vh;
  width: 12px;
  height: 15.63425px;
}

.raindrop:nth-child(10) {
  left: 52.99625vw;
  top: 78.6636vh;
  width: 16px;
  height: 18.90244px;
  background-position: 52.99625% 78.6636%;
}

.border:nth-child(10) {
  left: 52.99625vw;
  top: 78.6636vh;
  width: 12px;
  height: 18.90244px;
}

.raindrop:nth-child(11) {
  left: 24.31492vw;
  top: 87.80158vh;
  width: 8px;
  height: 6.6482px;
  background-position: 24.31492% 87.80158%;
}

.border:nth-child(11) {
  left: 24.31492vw;
  top: 87.80158vh;
  width: 4px;
  height: 6.6482px;
}

.raindrop:nth-child(12) {
  left: 45.41178vw;
  top: 71.46785vh;
  width: 10px;
  height: 11.49459px;
  background-position: 45.41178% 71.46785%;
}

.border:nth-child(12) {
  left: 45.41178vw;
  top: 71.46785vh;
  width: 6px;
  height: 11.49459px;
}

.raindrop:nth-child(13) {
  left: 82.62363vw;
  top: 64.49587vh;
  width: 15px;
  height: 16.69548px;
  background-position: 82.62363% 64.49587%;
}

.border:nth-child(13) {
  left: 82.62363vw;
  top: 64.49587vh;
  width: 11px;
  height: 16.69548px;
}

.raindrop:nth-child(14) {
  left: 13.64157vw;
  top: 53.7209vh;
  width: 11px;
  height: 8.22167px;
  background-position: 13.64157% 53.7209%;
}

.border:nth-child(14) {
  left: 13.64157vw;
  top: 53.7209vh;
  width: 7px;
  height: 8.22167px;
}

.raindrop:nth-child(15) {
  left: 58.32978vw;
  top: 91.68625vh;
  width: 7px;
  height: 6.17829px;
  background-position: 58.32978% 91.68625%;
}

.border:nth-child(15) {
  left: 58.32978vw;
  top: 91.68625vh;
  width: 3px;
  height: 6.17829px;
}

.raindrop:nth-child(16) {
  left: 61.12181vw;
  top: 15.03585vh;
  width: 8px;
  height: 9.51573px;
  background-position: 61.12181% 15.03585%;
}

.border:nth-child(16) {
  left: 61.12181vw;
  top: 15.03585vh;
  width: 4px;
  height: 9.51573px;
}

.raindrop:nth-child(17) {
  left: 85.27393vw;
  top: 63.76238vh;
  width: 9px;
  height: 7.18513px;
  background-position: 85.27393% 63.76238%;
}

.border:nth-child(17) {
  left: 85.27393vw;
  top: 63.76238vh;
  width: 5px;
  height: 7.18513px;
}

.raindrop:nth-child(18) {
  left: 30.14129vw;
  top: 33.27864vh;
  width: 16px;
  height: 16.45604px;
  background-position: 30.14129% 33.27864%;
}

.border:nth-child(18) {
  left: 30.14129vw;
  top: 33.27864vh;
  width: 12px;
  height: 16.45604px;
}

.raindrop:nth-child(19) {
  left: 26.19475vw;
  top: 21.98225vh;
  width: 6px;
  height: 6.26421px;
  background-position: 26.19475% 21.98225%;
}

.border:nth-child(19) {
  left: 26.19475vw;
  top: 21.98225vh;
  width: 2px;
  height: 6.26421px;
}

.raindrop:nth-child(20) {
  left: 8.22848vw;
  top: 69.52685vh;
  width: 7px;
  height: 5.75236px;
  background-position: 8.22848% 69.52685%;
}

.border:nth-child(20) {
  left: 8.22848vw;
  top: 69.52685vh;
  width: 3px;
  height: 5.75236px;
}

.raindrop:nth-child(21) {
  left: 16.21198vw;
  top: 61.66096vh;
  width: 15px;
  height: 13.41623px;
  background-position: 16.21198% 61.66096%;
}

.border:nth-child(21) {
  left: 16.21198vw;
  top: 61.66096vh;
  width: 11px;
  height: 13.41623px;
}

.raindrop:nth-child(22) {
  left: 74.15102vw;
  top: 21.96306vh;
  width: 16px;
  height: 15.67301px;
  background-position: 74.15102% 21.96306%;
}

.border:nth-child(22) {
  left: 74.15102vw;
  top: 21.96306vh;
  width: 12px;
  height: 15.67301px;
}

.raindrop:nth-child(23) {
  left: 64.09453vw;
  top: 48.15967vh;
  width: 11px;
  height: 9.68826px;
  background-position: 64.09453% 48.15967%;
}

.border:nth-child(23) {
  left: 64.09453vw;
  top: 48.15967vh;
  width: 7px;
  height: 9.68826px;
}

.raindrop:nth-child(24) {
  left: 48.10914vw;
  top: 89.22807vh;
  width: 10px;
  height: 11.05464px;
  background-position: 48.10914% 89.22807%;
}

.border:nth-child(24) {
  left: 48.10914vw;
  top: 89.22807vh;
  width: 6px;
  height: 11.05464px;
}

.raindrop:nth-child(25) {
  left: 80.57751vw;
  top: 44.68959vh;
  width: 14px;
  height: 15.0682px;
  background-position: 80.57751% 44.68959%;
}

.border:nth-child(25) {
  left: 80.57751vw;
  top: 44.68959vh;
  width: 10px;
  height: 15.0682px;
}

.raindrop:nth-child(26) {
  left: 49.37147vw;
  top: 12.12099vh;
  width: 7px;
  height: 5.39398px;
  background-position: 49.37147% 12.12099%;
}

.border:nth-child(26) {
  left: 49.37147vw;
  top: 12.12099vh;
  width: 3px;
  height: 5.39398px;
}

.raindrop:nth-child(27) {
  left: 21.15203vw;
  top: 90.10035vh;
  width: 15px;
  height: 14.77683px;
  background-position: 21.15203% 90.10035%;
}

.border:nth-child(27) {
  left: 21.15203vw;
  top: 90.10035vh;
  width: 11px;
  height: 14.77683px;
}

.raindrop:nth-child(28) {
  left: 38.34634vw;
  top: 56.09938vh;
  width: 13px;
  height: 11.67747px;
  background-position: 38.34634% 56.09938%;
}

.border:nth-child(28) {
  left: 38.34634vw;
  top: 56.09938vh;
  width: 9px;
  height: 11.67747px;
}

.raindrop:nth-child(29) {
  left: 41.5356vw;
  top: 15.67902vh;
  width: 15px;
  height: 11.55829px;
  background-position: 41.5356% 15.67902%;
}

.border:nth-child(29) {
  left: 41.5356vw;
  top: 15.67902vh;
  width: 11px;
  height: 11.55829px;
}

.raindrop:nth-child(30) {
  left: 93.41256vw;
  top: 57.89538vh;
  width: 11px;
  height: 10.57119px;
  background-position: 93.41256% 57.89538%;
}

.border:nth-child(30) {
  left: 93.41256vw;
  top: 57.89538vh;
  width: 7px;
  height: 10.57119px;
}

.raindrop:nth-child(31) {
  left: 52.01222vw;
  top: 15.56364vh;
  width: 9px;
  height: 8.8956px;
  background-position: 52.01222% 15.56364%;
}

.border:nth-child(31) {
  left: 52.01222vw;
  top: 15.56364vh;
  width: 5px;
  height: 8.8956px;
}

.raindrop:nth-child(32) {
  left: 77.99085vw;
  top: 63.21373vh;
  width: 16px;
  height: 11.47625px;
  background-position: 77.99085% 63.21373%;
}

.border:nth-child(32) {
  left: 77.99085vw;
  top: 63.21373vh;
  width: 12px;
  height: 11.47625px;
}

.raindrop:nth-child(33) {
  left: 43.62056vw;
  top: 91.07034vh;
  width: 15px;
  height: 11.50428px;
  background-position: 43.62056% 91.07034%;
}

.border:nth-child(33) {
  left: 43.62056vw;
  top: 91.07034vh;
  width: 11px;
  height: 11.50428px;
}

.raindrop:nth-child(34) {
  left: 28.2213vw;
  top: 23.47691vh;
  width: 11px;
  height: 12.69112px;
  background-position: 28.2213% 23.47691%;
}

.border:nth-child(34) {
  left: 28.2213vw;
  top: 23.47691vh;
  width: 7px;
  height: 12.69112px;
}

.raindrop:nth-child(35) {
  left: 46.35582vw;
  top: 3.44479vh;
  width: 15px;
  height: 12.52359px;
  background-position: 46.35582% 3.44479%;
}

.border:nth-child(35) {
  left: 46.35582vw;
  top: 3.44479vh;
  width: 11px;
  height: 12.52359px;
}

.raindrop:nth-child(36) {
  left: 22.45359vw;
  top: 12.37202vh;
  width: 16px;
  height: 18.40326px;
  background-position: 22.45359% 12.37202%;
}

.border:nth-child(36) {
  left: 22.45359vw;
  top: 12.37202vh;
  width: 12px;
  height: 18.40326px;
}

.raindrop:nth-child(37) {
  left: 81.02267vw;
  top: 66.25932vh;
  width: 8px;
  height: 7.65492px;
  background-position: 81.02267% 66.25932%;
}

.border:nth-child(37) {
  left: 81.02267vw;
  top: 66.25932vh;
  width: 4px;
  height: 7.65492px;
}

.raindrop:nth-child(38) {
  left: 8.64256vw;
  top: 2.13131vh;
  width: 15px;
  height: 17.12821px;
  background-position: 8.64256% 2.13131%;
}

.border:nth-child(38) {
  left: 8.64256vw;
  top: 2.13131vh;
  width: 11px;
  height: 17.12821px;
}

.raindrop:nth-child(39) {
  left: 29.81806vw;
  top: 18.57991vh;
  width: 16px;
  height: 14.9278px;
  background-position: 29.81806% 18.57991%;
}

.border:nth-child(39) {
  left: 29.81806vw;
  top: 18.57991vh;
  width: 12px;
  height: 14.9278px;
}

.raindrop:nth-child(40) {
  left: 46.52258vw;
  top: 0.23897vh;
  width: 14px;
  height: 16.3431px;
  background-position: 46.52258% 0.23897%;
}

.border:nth-child(40) {
  left: 46.52258vw;
  top: 0.23897vh;
  width: 10px;
  height: 16.3431px;
}

.raindrop:nth-child(41) {
  left: 87.31937vw;
  top: 59.64833vh;
  width: 6px;
  height: 6.13539px;
  background-position: 87.31937% 59.64833%;
}

.border:nth-child(41) {
  left: 87.31937vw;
  top: 59.64833vh;
  width: 2px;
  height: 6.13539px;
}

.raindrop:nth-child(42) {
  left: 17.05395vw;
  top: 33.70973vh;
  width: 14px;
  height: 12.83703px;
  background-position: 17.05395% 33.70973%;
}

.border:nth-child(42) {
  left: 17.05395vw;
  top: 33.70973vh;
  width: 10px;
  height: 12.83703px;
}

.raindrop:nth-child(43) {
  left: 5.54893vw;
  top: 26.66334vh;
  width: 7px;
  height: 7.81644px;
  background-position: 5.54893% 26.66334%;
}

.border:nth-child(43) {
  left: 5.54893vw;
  top: 26.66334vh;
  width: 3px;
  height: 7.81644px;
}

.raindrop:nth-child(44) {
  left: 86.55824vw;
  top: 88.61729vh;
  width: 8px;
  height: 8.69725px;
  background-position: 86.55824% 88.61729%;
}

.border:nth-child(44) {
  left: 86.55824vw;
  top: 88.61729vh;
  width: 4px;
  height: 8.69725px;
}

.raindrop:nth-child(45) {
  left: 87.46893vw;
  top: 95.80458vh;
  width: 8px;
  height: 7.67795px;
  background-position: 87.46893% 95.80458%;
}

.border:nth-child(45) {
  left: 87.46893vw;
  top: 95.80458vh;
  width: 4px;
  height: 7.67795px;
}

.raindrop:nth-child(46) {
  left: 10.36599vw;
  top: 1.12753vh;
  width: 16px;
  height: 13.47222px;
  background-position: 10.36599% 1.12753%;
}

.border:nth-child(46) {
  left: 10.36599vw;
  top: 1.12753vh;
  width: 12px;
  height: 13.47222px;
}

.raindrop:nth-child(47) {
  left: 43.2748vw;
  top: 71.77711vh;
  width: 6px;
  height: 4.30681px;
  background-position: 43.2748% 71.77711%;
}

.border:nth-child(47) {
  left: 43.2748vw;
  top: 71.77711vh;
  width: 2px;
  height: 4.30681px;
}

.raindrop:nth-child(48) {
  left: 9.19774vw;
  top: 76.68024vh;
  width: 14px;
  height: 16.35052px;
  background-position: 9.19774% 76.68024%;
}

.border:nth-child(48) {
  left: 9.19774vw;
  top: 76.68024vh;
  width: 10px;
  height: 16.35052px;
}

.raindrop:nth-child(49) {
  left: 52.60158vw;
  top: 60.10521vh;
  width: 14px;
  height: 13.78731px;
  background-position: 52.60158% 60.10521%;
}

.border:nth-child(49) {
  left: 52.60158vw;
  top: 60.10521vh;
  width: 10px;
  height: 13.78731px;
}

.raindrop:nth-child(50) {
  left: 19.45273vw;
  top: 19.80006vh;
  width: 16px;
  height: 15.31237px;
  background-position: 19.45273% 19.80006%;
}

.border:nth-child(50) {
  left: 19.45273vw;
  top: 19.80006vh;
  width: 12px;
  height: 15.31237px;
}

.raindrop:nth-child(51) {
  left: 63.47781vw;
  top: 52.34279vh;
  width: 16px;
  height: 16.80653px;
  background-position: 63.47781% 52.34279%;
}

.border:nth-child(51) {
  left: 63.47781vw;
  top: 52.34279vh;
  width: 12px;
  height: 16.80653px;
}

.raindrop:nth-child(52) {
  left: 99.4311vw;
  top: 2.07627vh;
  width: 7px;
  height: 8.21583px;
  background-position: 99.4311% 2.07627%;
}

.border:nth-child(52) {
  left: 99.4311vw;
  top: 2.07627vh;
  width: 3px;
  height: 8.21583px;
}

.raindrop:nth-child(53) {
  left: 70.11362vw;
  top: 24.26884vh;
  width: 7px;
  height: 5.49157px;
  background-position: 70.11362% 24.26884%;
}

.border:nth-child(53) {
  left: 70.11362vw;
  top: 24.26884vh;
  width: 3px;
  height: 5.49157px;
}

.raindrop:nth-child(54) {
  left: 23.07906vw;
  top: 29.73168vh;
  width: 6px;
  height: 5.17073px;
  background-position: 23.07906% 29.73168%;
}

.border:nth-child(54) {
  left: 23.07906vw;
  top: 29.73168vh;
  width: 2px;
  height: 5.17073px;
}

.raindrop:nth-child(55) {
  left: 47.2366vw;
  top: 56.0348vh;
  width: 10px;
  height: 7.91225px;
  background-position: 47.2366% 56.0348%;
}

.border:nth-child(55) {
  left: 47.2366vw;
  top: 56.0348vh;
  width: 6px;
  height: 7.91225px;
}

.raindrop:nth-child(56) {
  left: 40.43354vw;
  top: 67.09932vh;
  width: 8px;
  height: 8.59366px;
  background-position: 40.43354% 67.09932%;
}

.border:nth-child(56) {
  left: 40.43354vw;
  top: 67.09932vh;
  width: 4px;
  height: 8.59366px;
}

.raindrop:nth-child(57) {
  left: 98.81711vw;
  top: 58.76639vh;
  width: 10px;
  height: 7.17016px;
  background-position: 98.81711% 58.76639%;
}

.border:nth-child(57) {
  left: 98.81711vw;
  top: 58.76639vh;
  width: 6px;
  height: 7.17016px;
}

.raindrop:nth-child(58) {
  left: 88.07084vw;
  top: 55.5751vh;
  width: 8px;
  height: 8.86392px;
  background-position: 88.07084% 55.5751%;
}

.border:nth-child(58) {
  left: 88.07084vw;
  top: 55.5751vh;
  width: 4px;
  height: 8.86392px;
}

.raindrop:nth-child(59) {
  left: 52.20405vw;
  top: 57.01466vh;
  width: 6px;
  height: 6.98469px;
  background-position: 52.20405% 57.01466%;
}

.border:nth-child(59) {
  left: 52.20405vw;
  top: 57.01466vh;
  width: 2px;
  height: 6.98469px;
}

.raindrop:nth-child(60) {
  left: 89.94369vw;
  top: 97.44129vh;
  width: 11px;
  height: 10.46745px;
  background-position: 89.94369% 97.44129%;
}

.border:nth-child(60) {
  left: 89.94369vw;
  top: 97.44129vh;
  width: 7px;
  height: 10.46745px;
}

.raindrop:nth-child(61) {
  left: 21.73678vw;
  top: 26.77036vh;
  width: 14px;
  height: 14.11326px;
  background-position: 21.73678% 26.77036%;
}

.border:nth-child(61) {
  left: 21.73678vw;
  top: 26.77036vh;
  width: 10px;
  height: 14.11326px;
}

.raindrop:nth-child(62) {
  left: 53.26441vw;
  top: 17.15853vh;
  width: 8px;
  height: 9.43507px;
  background-position: 53.26441% 17.15853%;
}

.border:nth-child(62) {
  left: 53.26441vw;
  top: 17.15853vh;
  width: 4px;
  height: 9.43507px;
}

.raindrop:nth-child(63) {
  left: 54.2492vw;
  top: 55.33714vh;
  width: 13px;
  height: 10.4078px;
  background-position: 54.2492% 55.33714%;
}

.border:nth-child(63) {
  left: 54.2492vw;
  top: 55.33714vh;
  width: 9px;
  height: 10.4078px;
}

.raindrop:nth-child(64) {
  left: 97.6324vw;
  top: 94.0251vh;
  width: 13px;
  height: 9.31364px;
  background-position: 97.6324% 94.0251%;
}

.border:nth-child(64) {
  left: 97.6324vw;
  top: 94.0251vh;
  width: 9px;
  height: 9.31364px;
}

.raindrop:nth-child(65) {
  left: 77.00493vw;
  top: 54.64vh;
  width: 16px;
  height: 14.13071px;
  background-position: 77.00493% 54.64%;
}

.border:nth-child(65) {
  left: 77.00493vw;
  top: 54.64vh;
  width: 12px;
  height: 14.13071px;
}

.raindrop:nth-child(66) {
  left: 42.76767vw;
  top: 47.80128vh;
  width: 9px;
  height: 8.16349px;
  background-position: 42.76767% 47.80128%;
}

.border:nth-child(66) {
  left: 42.76767vw;
  top: 47.80128vh;
  width: 5px;
  height: 8.16349px;
}

.raindrop:nth-child(67) {
  left: 29.02017vw;
  top: 38.3205vh;
  width: 14px;
  height: 11.33444px;
  background-position: 29.02017% 38.3205%;
}

.border:nth-child(67) {
  left: 29.02017vw;
  top: 38.3205vh;
  width: 10px;
  height: 11.33444px;
}

.raindrop:nth-child(68) {
  left: 56.67285vw;
  top: 52.96135vh;
  width: 13px;
  height: 14.70063px;
  background-position: 56.67285% 52.96135%;
}

.border:nth-child(68) {
  left: 56.67285vw;
  top: 52.96135vh;
  width: 9px;
  height: 14.70063px;
}

.raindrop:nth-child(69) {
  left: 53.44953vw;
  top: 48.14742vh;
  width: 10px;
  height: 8.86708px;
  background-position: 53.44953% 48.14742%;
}

.border:nth-child(69) {
  left: 53.44953vw;
  top: 48.14742vh;
  width: 6px;
  height: 8.86708px;
}

.raindrop:nth-child(70) {
  left: 73.2284vw;
  top: 65.72901vh;
  width: 12px;
  height: 8.74502px;
  background-position: 73.2284% 65.72901%;
}

.border:nth-child(70) {
  left: 73.2284vw;
  top: 65.72901vh;
  width: 8px;
  height: 8.74502px;
}

.raindrop:nth-child(71) {
  left: 20.04432vw;
  top: 60.68617vh;
  width: 13px;
  height: 12.58281px;
  background-position: 20.04432% 60.68617%;
}

.border:nth-child(71) {
  left: 20.04432vw;
  top: 60.68617vh;
  width: 9px;
  height: 12.58281px;
}

.raindrop:nth-child(72) {
  left: 71.75074vw;
  top: 61.41725vh;
  width: 9px;
  height: 9.25852px;
  background-position: 71.75074% 61.41725%;
}

.border:nth-child(72) {
  left: 71.75074vw;
  top: 61.41725vh;
  width: 5px;
  height: 9.25852px;
}

.raindrop:nth-child(73) {
  left: 44.11665vw;
  top: 36.31905vh;
  width: 12px;
  height: 13.69669px;
  background-position: 44.11665% 36.31905%;
}

.border:nth-child(73) {
  left: 44.11665vw;
  top: 36.31905vh;
  width: 8px;
  height: 13.69669px;
}

.raindrop:nth-child(74) {
  left: 55.35086vw;
  top: 8.19274vh;
  width: 14px;
  height: 13.45257px;
  background-position: 55.35086% 8.19274%;
}

.border:nth-child(74) {
  left: 55.35086vw;
  top: 8.19274vh;
  width: 10px;
  height: 13.45257px;
}

.raindrop:nth-child(75) {
  left: 4.54157vw;
  top: 32.17235vh;
  width: 9px;
  height: 6.82736px;
  background-position: 4.54157% 32.17235%;
}

.border:nth-child(75) {
  left: 4.54157vw;
  top: 32.17235vh;
  width: 5px;
  height: 6.82736px;
}

.raindrop:nth-child(76) {
  left: 80.75407vw;
  top: 32.64487vh;
  width: 7px;
  height: 6.3844px;
  background-position: 80.75407% 32.64487%;
}

.border:nth-child(76) {
  left: 80.75407vw;
  top: 32.64487vh;
  width: 3px;
  height: 6.3844px;
}

.raindrop:nth-child(77) {
  left: 45.86749vw;
  top: 24.76649vh;
  width: 9px;
  height: 7.71612px;
  background-position: 45.86749% 24.76649%;
}

.border:nth-child(77) {
  left: 45.86749vw;
  top: 24.76649vh;
  width: 5px;
  height: 7.71612px;
}

.raindrop:nth-child(78) {
  left: 67.34197vw;
  top: 72.68787vh;
  width: 14px;
  height: 12.74281px;
  background-position: 67.34197% 72.68787%;
}

.border:nth-child(78) {
  left: 67.34197vw;
  top: 72.68787vh;
  width: 10px;
  height: 12.74281px;
}

.raindrop:nth-child(79) {
  left: 64.49319vw;
  top: 10.74334vh;
  width: 15px;
  height: 15.18452px;
  background-position: 64.49319% 10.74334%;
}

.border:nth-child(79) {
  left: 64.49319vw;
  top: 10.74334vh;
  width: 11px;
  height: 15.18452px;
}

.raindrop:nth-child(80) {
  left: 53.51959vw;
  top: 42.4558vh;
  width: 13px;
  height: 9.84087px;
  background-position: 53.51959% 42.4558%;
}

.border:nth-child(80) {
  left: 53.51959vw;
  top: 42.4558vh;
  width: 9px;
  height: 9.84087px;
}

.raindrop:nth-child(81) {
  left: 99.62433vw;
  top: 35.60543vh;
  width: 8px;
  height: 9.04614px;
  background-position: 99.62433% 35.60543%;
}

.border:nth-child(81) {
  left: 99.62433vw;
  top: 35.60543vh;
  width: 4px;
  height: 9.04614px;
}

.raindrop:nth-child(82) {
  left: 71.22102vw;
  top: 6.86638vh;
  width: 9px;
  height: 6.95027px;
  background-position: 71.22102% 6.86638%;
}

.border:nth-child(82) {
  left: 71.22102vw;
  top: 6.86638vh;
  width: 5px;
  height: 6.95027px;
}

.raindrop:nth-child(83) {
  left: 3.55274vw;
  top: 36.4455vh;
  width: 15px;
  height: 10.7454px;
  background-position: 3.55274% 36.4455%;
}

.border:nth-child(83) {
  left: 3.55274vw;
  top: 36.4455vh;
  width: 11px;
  height: 10.7454px;
}

.raindrop:nth-child(84) {
  left: 28.1645vw;
  top: 98.70457vh;
  width: 13px;
  height: 12.01471px;
  background-position: 28.1645% 98.70457%;
}

.border:nth-child(84) {
  left: 28.1645vw;
  top: 98.70457vh;
  width: 9px;
  height: 12.01471px;
}

.raindrop:nth-child(85) {
  left: 89.39592vw;
  top: 96.0325vh;
  width: 7px;
  height: 7.70343px;
  background-position: 89.39592% 96.0325%;
}

.border:nth-child(85) {
  left: 89.39592vw;
  top: 96.0325vh;
  width: 3px;
  height: 7.70343px;
}

.raindrop:nth-child(86) {
  left: 13.38937vw;
  top: 80.39838vh;
  width: 14px;
  height: 14.61337px;
  background-position: 13.38937% 80.39838%;
}

.border:nth-child(86) {
  left: 13.38937vw;
  top: 80.39838vh;
  width: 10px;
  height: 14.61337px;
}

.raindrop:nth-child(87) {
  left: 28.32263vw;
  top: 94.74305vh;
  width: 12px;
  height: 9.56749px;
  background-position: 28.32263% 94.74305%;
}

.border:nth-child(87) {
  left: 28.32263vw;
  top: 94.74305vh;
  width: 8px;
  height: 9.56749px;
}

.raindrop:nth-child(88) {
  left: 62.84745vw;
  top: 99.03054vh;
  width: 7px;
  height: 8.28451px;
  background-position: 62.84745% 99.03054%;
}

.border:nth-child(88) {
  left: 62.84745vw;
  top: 99.03054vh;
  width: 3px;
  height: 8.28451px;
}

.raindrop:nth-child(89) {
  left: 24.54085vw;
  top: 52.66151vh;
  width: 15px;
  height: 16.32859px;
  background-position: 24.54085% 52.66151%;
}

.border:nth-child(89) {
  left: 24.54085vw;
  top: 52.66151vh;
  width: 11px;
  height: 16.32859px;
}

.raindrop:nth-child(90) {
  left: 9.30598vw;
  top: 9.54103vh;
  width: 10px;
  height: 8.10777px;
  background-position: 9.30598% 9.54103%;
}

.border:nth-child(90) {
  left: 9.30598vw;
  top: 9.54103vh;
  width: 6px;
  height: 8.10777px;
}

.raindrop:nth-child(91) {
  left: 13.06724vw;
  top: 61.73055vh;
  width: 7px;
  height: 5.85564px;
  background-position: 13.06724% 61.73055%;
}

.border:nth-child(91) {
  left: 13.06724vw;
  top: 61.73055vh;
  width: 3px;
  height: 5.85564px;
}

.raindrop:nth-child(92) {
  left: 67.48vw;
  top: 97.7108vh;
  width: 7px;
  height: 7.94061px;
  background-position: 67.48% 97.7108%;
}

.border:nth-child(92) {
  left: 67.48vw;
  top: 97.7108vh;
  width: 3px;
  height: 7.94061px;
}

.raindrop:nth-child(93) {
  left: 13.84729vw;
  top: 33.54135vh;
  width: 16px;
  height: 16.24412px;
  background-position: 13.84729% 33.54135%;
}

.border:nth-child(93) {
  left: 13.84729vw;
  top: 33.54135vh;
  width: 12px;
  height: 16.24412px;
}

.raindrop:nth-child(94) {
  left: 65.83989vw;
  top: 40.63561vh;
  width: 11px;
  height: 13.03452px;
  background-position: 65.83989% 40.63561%;
}

.border:nth-child(94) {
  left: 65.83989vw;
  top: 40.63561vh;
  width: 7px;
  height: 13.03452px;
}

.raindrop:nth-child(95) {
  left: 26.25958vw;
  top: 92.94737vh;
  width: 16px;
  height: 12.70539px;
  background-position: 26.25958% 92.94737%;
}

.border:nth-child(95) {
  left: 26.25958vw;
  top: 92.94737vh;
  width: 12px;
  height: 12.70539px;
}

.raindrop:nth-child(96) {
  left: 83.99642vw;
  top: 47.92488vh;
  width: 6px;
  height: 5.57366px;
  background-position: 83.99642% 47.92488%;
}

.border:nth-child(96) {
  left: 83.99642vw;
  top: 47.92488vh;
  width: 2px;
  height: 5.57366px;
}

.raindrop:nth-child(97) {
  left: 31.42988vw;
  top: 63.83422vh;
  width: 9px;
  height: 6.69163px;
  background-position: 31.42988% 63.83422%;
}

.border:nth-child(97) {
  left: 31.42988vw;
  top: 63.83422vh;
  width: 5px;
  height: 6.69163px;
}

.raindrop:nth-child(98) {
  left: 29.51296vw;
  top: 25.96166vh;
  width: 16px;
  height: 11.87231px;
  background-position: 29.51296% 25.96166%;
}

.border:nth-child(98) {
  left: 29.51296vw;
  top: 25.96166vh;
  width: 12px;
  height: 11.87231px;
}

.raindrop:nth-child(99) {
  left: 16.3986vw;
  top: 18.03772vh;
  width: 11px;
  height: 9.1939px;
  background-position: 16.3986% 18.03772%;
}

.border:nth-child(99) {
  left: 16.3986vw;
  top: 18.03772vh;
  width: 7px;
  height: 9.1939px;
}

.raindrop:nth-child(100) {
  left: 90.07533vw;
  top: 57.43449vh;
  width: 16px;
  height: 18.43328px;
  background-position: 90.07533% 57.43449%;
}

.border:nth-child(100) {
  left: 90.07533vw;
  top: 57.43449vh;
  width: 12px;
  height: 18.43328px;
}

HTML

Recommendation

Join Effecthub.com