- var n = 0;

while ++n < 40
	span ❄️ 
View Compiled
body {
	background: linear-gradient(hsl(220 80% 10%), hsl(220 80% 25%));
	overflow: hidden;
}

span {
	display: inline-block;
	margin: 0 .5em 40vh;
	font-size: calc(200% * var(--fs, 1));
	transform: translateY(-100vh);
	animation: snowfall calc(6s / var(--fs, 1)) infinite linear both;
	text-shadow: .1em .1em .4em rgba(0 0 0 / .4);
}

@keyframes snowfall {
	30% {
		translate: var(--offset-1, 1ch);
	}
	
	60% {
		translate: var(--offset-2, -1ch);
	}
	
	to {
		transform: translateY(100vh);
	}
}

span:nth-child(3n) { --fs: 1.3; }
span:nth-child(3n + 2) { --fs: .8; }

span:nth-child(5n    ) { --offset-1: 4ch; }
span:nth-child(5n + 1) { --offset-1: -1ch; }
span:nth-child(5n + 2) { --offset-1: 3ch; }
span:nth-child(5n + 3) { --offset-1: -5ch; }
span:nth-child(5n + 4) { --offset-1: -2ch; }

span:nth-child(7n    ) { --offset-2: 5ch; }
span:nth-child(7n + 1) { --offset-2: 3ch; }
span:nth-child(7n + 2) { --offset-2: -2ch; }
span:nth-child(7n + 3) { --offset-2: 2ch; }
span:nth-child(7n + 4) { --offset-2: -4ch; }
span:nth-child(7n + 5) { --offset-2: 1ch; }
span:nth-child(7n + 6) { --offset-2: -1ch; }

span:nth-child(11n + 1) { animation-delay: .5s; }
span:nth-child(11n + 2) { animation-delay: 1s; }
span:nth-child(11n + 3) { animation-delay: 1.5s; }
span:nth-child(11n + 5) { animation-delay: 2s; }
span:nth-child(11n + 6) { animation-delay: 2.5s; }
span:nth-child(11n + 7) { animation-delay: 3s; }
span:nth-child(11n + 9) { animation-delay: 3.5s; }
span:nth-child(11n + 10) { animation-delay: 4s; }
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.