How to make it rain everywhere? - css

Question

I would like to create a raining-effect for my weather app with CSS-only. However, even though I achieved satisfying results with the look, I can't seem to make them cover the entire screen continuously and not just random chunks of it - how would I go about this?
body {
overflow: hidden;
}
#background {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
#background.night {
background: linear-gradient(#0F2129, #47334A);
}
#background>.cloud {
width: 900px;
height: 900px;
position: absolute;
background-color: #fff;
border-radius: 50%;
animation: cloud 10s infinite alternate;
}
#background.rain>.cloud {
opacity: .5;
}
#background>.cloud:nth-child(even) {
animation-delay: 3s;
}
#background.night>.cloud {
background-color: grey;
}
#background.rain>.cloud:before,
#background.rain>.cloud:after {
animation: rain 1s infinite linear;
content: '';
border-radius: 50%;
display: block;
height: 6px;
width: 3px;
opacity: 1;
margin-top: 700px;
}
#background.rain>.cloud:after {
transform: translate(50px);
}
#background.rain>.cloud:nth-child(even):before,
#background.rain>.cloud:nth-child(even):after {
animation-delay: .3s;
}
#keyframes rain {
0% {
box-shadow: #cccccc 30px 30px, #cccccc 40px 40px, #cccccc 50px 75px, #cccccc 55px 50px, #cccccc 70px 100px, #cccccc 80px 95px, #cccccc 110px 45px, #cccccc 75px 50px, #cccccc 80px 20px, #cccccc 65px 40px, #cccccc 100px 80px, #cccccc 45px 85px, #cccccc 95px 50px, #cccccc 90px 35px;
}
100% {
box-shadow: #cccccc 30px 970px, #cccccc 40px 980px, #cccccc 50px 945px, #cccccc 55px 980px, #cccccc 70px 960px, #cccccc 80px 945px, #cccccc 110px 995px, #cccccc 75px 950px, #cccccc 80px 920px, #cccccc 65px 940px, #cccccc 100px 980px, #cccccc 45px 985px, #cccccc 95px 950px, #cccccc 90px 985px;
}
}
#keyframes cloud {
100% {
transform: translate(-50px) scale(1.05);
}
}
<div id="background" class="rain night">
<div class="cloud" style="top: -797.689px; left: -315px;"></div>
<div class="cloud" style="top: -865.689px; left: -225px;"></div>
<div class="cloud" style="top: -814.689px; left: -65px;"></div>
<div class="cloud" style="top: -853.689px; left: 253px;"></div>
<div class="cloud" style="top: -823.689px; left: 23px;"></div>
<div class="cloud" style="top: -843.689px; left: 109px;"></div>
</div>

Answer 1

This is a good job for some random radial-gradient that you repeat. Not linear-gradient because you will have a hard time creating spaces between repetition (maybe impossible).
Here is a basic example. We use the same gradient at different random position and all will repeat:
html {
height:100%;
background: linear-gradient(#0F2129, #47334A);
overflow:hidden;
}
html:before {
content:"";
position:absolute;
bottom:0;
right:0;
left:0;
height:calc(100% + 100px); /* should be bigger than (100% + 55px)*/
background:
radial-gradient(2px 8px,#cccccc 100%,transparent 100%) -12px 3px,
radial-gradient(2px 8px,#cccccc 100%,transparent 100%) 17px 0,
radial-gradient(2px 8px,#cccccc 100%,transparent 100%) 6px 12px,
radial-gradient(2px 8px,#cccccc 100%,transparent 100%) 24px 23px,
radial-gradient(2px 8px,#cccccc 100%,transparent 100%) 39px 30px,
radial-gradient(2px 8px,#cccccc 100%,transparent 100%) 5px 43px;
background-size:50px 55px;
animation:rain 0.2s linear infinite;
}
#keyframes rain{
to {
transform:translateY(55px); /* Same as the height of the background-size */
}
}
And if you want a litte skewing:
html {
height:100%;
background: linear-gradient(#0F2129, #47334A);
overflow:hidden;
}
html:before {
content:"";
position:absolute;
bottom:0;
right:-20%;
left:-20%;
height:calc(100% + 100px); /* should be bigger than (100% + 55px)*/
background:
radial-gradient(2px 8px,#cccccc 100%,transparent 100%) -12px 3px,
radial-gradient(2px 8px,#cccccc 100%,transparent 100%) 17px 0,
radial-gradient(2px 8px,#cccccc 100%,transparent 100%) 6px 12px,
radial-gradient(2px 8px,#cccccc 100%,transparent 100%) 24px 23px,
radial-gradient(2px 8px,#cccccc 100%,transparent 100%) 39px 30px,
radial-gradient(2px 8px,#cccccc 100%,transparent 100%) 5px 43px;
background-size:50px 55px;
animation:rain 0.2s linear infinite;
transform:skew(-8deg);
}
#keyframes rain{
to {
transform:skew(-8deg) translateY(55px); /* Same as the height of the background-size */
}
}
And with CSS variables to easily control:
html {
height:100%;
background: linear-gradient(#0F2129, #47334A);
overflow:hidden;
--s:2px 8px; /* size of drop of water*/
--c:#ccc; /* color of the water*/
--a:-7deg; /* control the skewing*/
--w:50px; /* width of the pattern*/
--h:55px; /* height of the pattern*/
--rad:radial-gradient(var(--s),var(--c) 100%,transparent 100%)
}
html:before {
content:"";
position:absolute;
bottom:0;
right:-20%;
left:-20%;
height:calc(100% + var(--h) + 10px); /* should be bigger than (100% + var(--h))*/
background:
var(--rad) -12px 3px,
var(--rad) 17px 0,
var(--rad) 6px 12px,
var(--rad) 24px 23px,
var(--rad) 39px 30px,
var(--rad) 5px 43px;
background-size:var(--w) var(--h);
animation:rain 0.2s linear infinite;
transform:skew(var(--a));
}
#keyframes rain{
to {
transform:skew(var(--a)) translateY(var(--h)); /* Same as the height of the background-size */
}
}
You can consider two layers with a different pattern for another kind of animation (more random)
html {
height:100%;
background: linear-gradient(#0F2129, #47334A);
overflow:hidden;
--s:2px 8px; /* size of drop of water*/
--c:#ccc; /* color of the water*/
--a:-7deg; /* control the skewing*/
--w:53px; /* width of the pattern*/
--h:55px; /* height of the pattern*/
--rad:radial-gradient(var(--s),var(--c) 100%,transparent 100%)
}
html:before,
html:after{
content:"";
position:absolute;
bottom:0;
right:-20%;
left:-20%;
height:calc(100% + var(--h) + 10px); /* should be bigger than (100% + var(--h))*/
background:
var(--rad) -12px 3px,
var(--rad) 17px 0,
var(--rad) 6px 12px,
var(--rad) 24px 23px,
var(--rad) 39px 30px,
var(--rad) 5px 43px;
background-size:var(--w) var(--h);
animation:rain 0.2s linear infinite;
transform:skew(var(--a));
}
html:after {
--h:70px;
--w:61px;
}
#keyframes rain{
to {
transform:skew(var(--a)) translateY(var(--h)); /* Same as the height of the background-size */
}
}

Answer 2

I think you were missing some margin-left
body {
overflow: hidden;
}
#background {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
#background.night {
background: linear-gradient(#0F2129, #47334A);
}
#background>.cloud {
width: 900px;
height: 900px;
position: absolute;
background-color: #fff;
border-radius: 50%;
animation: cloud 10s infinite alternate;
}
#background.rain>.cloud {
opacity: .5;
}
#background>.cloud:nth-child(even) {
animation-delay: 3s;
}
#background.night>.cloud {
background-color: grey;
}
#background.rain>.cloud:before,
#background.rain>.cloud:after {
animation: rain 1s infinite linear;
content: '';
border-radius: 50%;
display: block;
height: 6px;
width: 3px;
opacity: 1;
margin-top: 700px;
margin-left:400px;
}
#background.rain>.cloud:after {
transform: translate(50px);
}
#background.rain>.cloud:nth-child(even):before,
#background.rain>.cloud:nth-child(even):after {
animation-delay: .3s;
}
#keyframes rain {
0% {
box-shadow: #cccccc 30px 30px, #cccccc 40px 40px, #cccccc 50px 75px, #cccccc 55px 50px, #cccccc 70px 100px, #cccccc 80px 95px, #cccccc 110px 45px, #cccccc 75px 50px, #cccccc 80px 20px, #cccccc 65px 40px, #cccccc 100px 80px, #cccccc 45px 85px, #cccccc 95px 50px, #cccccc 90px 35px;
}
100% {
box-shadow: #cccccc 30px 970px, #cccccc 40px 980px, #cccccc 50px 945px, #cccccc 55px 980px, #cccccc 70px 960px, #cccccc 80px 945px, #cccccc 110px 995px, #cccccc 75px 950px, #cccccc 80px 920px, #cccccc 65px 940px, #cccccc 100px 980px, #cccccc 45px 985px, #cccccc 95px 950px, #cccccc 90px 985px;
}
}
#keyframes cloud {
100% {
transform: translate(-50px) scale(1.05);
}
}
<div id="background" class="rain night">
<div class="cloud" style="top: -797.689px; left: -315px;"></div>
<div class="cloud" style="top: -865.689px; left: -225px;"></div>
<div class="cloud" style="top: -814.689px; left: -65px;"></div>
<div class="cloud" style="top: -853.689px; left: 253px;"></div>
<div class="cloud" style="top: -823.689px; left: 23px;"></div>
<div class="cloud" style="top: -843.689px; left: 109px;"></div>
</div>