Hi! I'd recommend using a video background (which is natively supported in squarespace) rather than a CSS-and-Javascript solution. You should be able to find a stock video of raindrops similar to this one.
However! If you're certain this is what you want to embed, read on ---
1. Create a code block and put it in your desired section. The code needs to contain the html markup, the custom CSS, and the custom javascript. Something like this should do it, I think --
<div class="rain-section-background">
<div class="back-row-toggle">
<div class="rain front-row"></div>
<div class="rain back-row"></div>
</div>
</div>
<style>
[data-section-id="the-squarespace-section-id"] {
position: relative;
}
.rain-section-background {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 0;
overflow: hidden;
background: linear-gradient(to bottom, #202020, #111119);
}
.rain {
position: absolute;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
}
.rain.back-row {
z-index: 1;
bottom: 60px;
opacity: 0.5;
}
.drop {
position: absolute;
bottom: 100%;
width: 15px;
height: 120px;
pointer-events: none;
animation: drop 0.5s linear infinite;
}
@keyframes drop {
0% {
transform: translateY(0vh);
}
75% {
transform: translateY(90vh);
}
100% {
transform: translateY(90vh);
}
}
.stem {
width: 1px;
height: 60%;
margin-left: 7px;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.25));
animation: stem 0.5s linear infinite;
}
@keyframes stem {
0% {
opacity: 1;
}
65% {
opacity: 1;
}
75% {
opacity: 0;
}
100% {
opacity: 0;
}
}
.splat {
width: 15px;
height: 10px;
border-top: 2px dotted rgba(255, 255, 255, 0.5);
border-radius: 50%;
opacity: 1;
transform: scale(0);
animation: splat 0.5s linear infinite;
display: none;
}
.splat-toggle .splat {
display: block;
}
@keyframes splat {
0% {
opacity: 1;
transform: scale(0);
}
80% {
opacity: 1;
transform: scale(0);
}
90% {
opacity: 0.5;
transform: scale(1);
}
100% {
opacity: 0;
transform: scale(1.5);
}
}
</style>
<script>
var makeItRain = function() {
//clear out everything
$('.rain').empty();
var increment = 0;
var drops = "";
var backDrops = "";
while (increment < 100) {
//couple random numbers to use for various randomizations
//random number between 98 and 1
var randoHundo = (Math.floor(Math.random() * (98 - 1 + 1) + 1));
//random number between 5 and 2
var randoFiver = (Math.floor(Math.random() * (5 - 2 + 1) + 2));
//increment
increment += randoFiver;
//add in a new raindrop with various randomizations to certain CSS properties
drops += '<div class="drop" style="left: ' + increment + '%; bottom: ' + (randoFiver + randoFiver - 1 + 100) + '%; animation-delay: 0.' + randoHundo + 's; animation-duration: 0.5' + randoHundo + 's;"><div class="stem" style="animation-delay: 0.' + randoHundo + 's; animation-duration: 0.5' + randoHundo + 's;"></div><div class="splat" style="animation-delay: 0.' + randoHundo + 's; animation-duration: 0.5' + randoHundo + 's;"></div></div>';
backDrops += '<div class="drop" style="right: ' + increment + '%; bottom: ' + (randoFiver + randoFiver - 1 + 100) + '%; animation-delay: 0.' + randoHundo + 's; animation-duration: 0.5' + randoHundo + 's;"><div class="stem" style="animation-delay: 0.' + randoHundo + 's; animation-duration: 0.5' + randoHundo + 's;"></div><div class="splat" style="animation-delay: 0.' + randoHundo + 's; animation-duration: 0.5' + randoHundo + 's;"></div></div>';
}
$('.rain.front-row').append(drops);
$('.rain.back-row').append(backDrops);
}
makeItRain();
</script>
(This is the same code from the codepen, but I removed the parts about the toggle buttons because I assume you don't want your end users deciding if they want to see splashes or not)
Then, you'll need to find the section ID. Right click your section, go to Inspect, and scroll around until you see something called a <section>. There's going to be a lot of stuff in there. Basically you're looking for something that says
<section class="..." ... data-section-id="609579ac16e9-for-example-0858af6cd450" ... >
The number in those quotes is the one you're looking for. Go back to your code block and find the part where I entered "the-squarespace-section-id" and replace that with the number (with quotes). Don't change the brackets or anything else!
This will probably work but without seeing your site I can't be certain. Good luck! And again: a video background will be much easier.