Published by Cory

published 1638048517
updated 1638122592

Category: Web, HTML, Tech

View Blog View Profile Report Blog Entry

🖥🎄 CSS Holiday Snippet: Winter Snow

Here's two lines of code to add some nice subtle snow along with a nice snowbank at the bottom:

body::before{
	content: " "; 
	width: 100vw; 
	height: 100vh; 
	display: block; 
	position: fixed; 
	background-image: url('https://media.giphy.com/media/JTiov5UXnJyKI/source.gif'); 
	background-size: cover; 
	mix-blend-mode: screen; 
	pointer-events: none; 
	z-index: 1; 
	filter: blur(3px);
}
body::after{
	content: " ";
	width: 100vw;
	display: block;
	position: fixed;
	height: 10vw;
	background-image: url('https://tinyimg.io/i/Cnq9jSm.png');
	background-size: cover;
	bottom: -50px;
	z-index: 0;
	pointer-events: none;
}

If you're using other CSS that interacts with body::before and body::after, you might have to change body to html. Happy holidays!

13 Kudos

Comments

Displaying 3 of 3 comments ( View all | Add Comment )

Fluid Dynamic

OMG I love this

HELLY STILETTO, High Priestess of Coffee and Wine

Thanks! I put this in About Me? It didn't seem to work?

these have to go in between style tags like the ones An puts on the advent calender :)

by Fluid Dynamic; 1701798224; Report

Thanks! I'll give it a try!

by HELLY STILETTO, High Priestess of Coffee and Wine; 1701862050; Report

Kathleen

These are so classy, and don’t involve any restructure. Love.