
CSS Snow Globe Animation:
*to see the animation on the website click here.
Demo:
To create the CSS Christmas Tree Snow Globe follow the steps below and watch the video tutorial:
- Add HTML
- Add CSS
- Add CSS Animation
Step.1
Add HTML
<div class="snowball">
<div class="ball">
<div class="fall">
<div class="snowFlakes1"></div>
<div class="snowFlakes2"></div>
<div class="snowFlakes3"></div>
<div class="snowFlakes4"></div>
<div class="snowFlakes5"></div>
<div class="snowFlakes6"></div>
<div class="snowFlakes7"></div>
<div class="snowFlakes8"></div>
<div class="snowFlakes9"></div>
<div class="snowFlakes10"></div>
</div>
<div class="tree">
<div class="tree1"></div>
<div class="tree2"></div>
<div class="snow"></div>
<div class="balls"></div>
<div class="balls1"></div>
</div>
<div class="star"></div>
<div class="star1"></div>
</div>
<div class="holder">
<div class="text">Merry Christmas!</div>
</div>
</div>
Step2.
Add CSS
Set the colour and position of the background and elements:
body {
justify-content: center;
align-items: center;
display: flex;
background-color: #f1faee;
height: 100vh;
}
.snowball {
position: relative;
top:-200px;
left:-200px;
}
Create the glass ball and the holder:
.ball {
position: absolute;
width: 300px;
height:300px;
border: 8px solid #003049;
background-color: #bde0fe;
box-shadow: inset 10px 10px 0 white;
border-radius:50%;
overflow:hidden;
}
.holder {
position: absolute;
width:250px;
height:55px;
background-color: #2a9d8f;
border: 8px solid #003049;
border-radius:20px 20px 0 0;
top:308px;
left:25px;
}
.holder:before {
content:"";
position: absolute;
width:500px;
height:8px;
background-color:#003049;
top:55px;
left:-130px;
}

Add the Christmas Tree:
.tree {
position: absolute;
background-color:#003049;
width:8px;
height: 40px;
top:270px;
left: 145px;
}
.tree:before {
content:"";
position: absolute;
width: 0;
height: 0;
border-left: 75px solid transparent;
border-right: 75px solid transparent;
border-bottom: 120px solid #003049;
top:-120px;
left:-70px;
}
.tree:after {
content:"";
position: absolute;
width: 0;
height: 0;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
border-bottom: 95px solid #386641;
top:-103px;
left:-55px;
}
.tree1 {
position: absolute;
width: 0;
height: 0;
border-left: 75px solid transparent;
border-right: 75px solid transparent;
border-bottom: 120px solid #003049;
top:-160px;
left:-70px;
z-index:1;
}
.tree1:before {
content:"";
position: absolute;
width: 0;
height: 0;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
border-bottom: 95px solid #6a994e;
top:17px;
left:-60px;
}
.tree2 {
position: absolute;
width: 0;
height: 0;
border-left: 65px solid transparent;
border-right: 65px solid transparent;
border-bottom: 110px solid #003049;
top:-200px;
left:-60px;
z-index:2;
}
.tree2:before {
content:"";
position: absolute;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 85px solid #386641;
top:17px;
left:-50px;
}

and decorate the tree:
.snow {
position: absolute;
z-index:5;
background-color: white;
width: 30px;
height: 15px;
border-radius: 20px;
top:-119px;
left:-30px;
}
.snow:before {
content:"";
position: absolute;
z-index:5;
background-color: white;
width: 30px;
height: 15px;
border-radius: 20px;
top:50px;
left:30px;
}
.snow:after {
content:"";
position: absolute;
z-index:5;
background-color: white;
width: 30px;
height: 15px;
border-radius: 20px;
top:90px;
left:10px;
}
.balls {
position: absolute;
width: 15px;
height: 15px;
background-color: #d90429;
border-radius:50%;
border:4px solid #003049;
top:-100px;
z-index:10;
}
.balls:before {
content:"";
position: absolute;
width: 15px;
height: 15px;
background-color: #118ab2;
border-radius:50%;
border:4px solid #003049;
top:-50px;
left:15px;
}
.balls:after {
content:"";
position: absolute;
width: 15px;
height: 15px;
background-color: #8338ec;
border-radius:50%;
border:4px solid #003049;
top:50px;
left:-55px;
}
.balls1 {
position: absolute;
width: 15px;
height: 15px;
background-color: #ff006e;
border-radius:50%;
border:4px solid #003049;
top:-160px;
left:-30px;
z-index:10;
}
.balls1:before {
content:"";
position: absolute;
width: 15px;
height: 15px;
background-color: #fb5607;
border-radius:50%;
border:4px solid #003049;
top:100px;
left:55px;
}
.balls1:after {
content:"";
position: absolute;
width: 15px;
height: 15px;
background-color: #ffbe0b;
border-radius:50%;
border:4px solid #003049;
top:75px;
left:-25px;
}
.star1 {
margin: 50px 0;
position: absolute;
display: block;
width: 0px;
height: 0px;
border-right: 45.5px solid transparent;
border-bottom: 31.85px solid #003049;
border-left: 45.5px solid transparent;
transform: rotate(35deg);
top:3px;
left:107.5px;
z-index:3;
}
.star1:before {
border-bottom: 36.4px solid #003049;
border-left: 12.85px solid transparent;
border-right: 12.95px solid transparent;
position: absolute;
height: 0;
width: 0;
top: -22.75px;
left: -31.85px;
display: block;
content: '';
transform: rotate(-35deg);
}
.star1:after {
position: absolute;
display: block;
top: 1.365px;
left: -48.37px;
width: 0px;
height: 0px;
border-right: 45.5px solid transparent;
border-bottom: 31.85px solid #003049;
border-left: 45.5px solid transparent;
transform: rotate(-70deg);
content: '';
}
.star {
margin: 50px 0;
position: absolute;
display: block;
width: 0px;
height: 0px;
border-right: 25px solid transparent;
border-bottom: 17.5px solid #ffbe0b;
border-left: 25px solid transparent;
transform: rotate(35deg);
top:10px;
left:126px;
z-index:4;
}
.star:before {
border-bottom: 20px solid #ffbe0b;
border-left: 7.5px solid transparent;
border-right: 7.5px solid transparent;
position: absolute;
height: 0;
width: 0;
top: -12.5px;
left: -17.5px;
display: block;
content: '';
transform: rotate(-35deg);
}
.star:after {
position: absolute;
display: block;
top: 0.75px;
left: -26.25px;
width: 0px;
height: 0px;
border-right: 25px solid transparent;
border-bottom: 17.5px solid #ffbe0b;
border-left: 25px solid transparent;
transform: rotate(-70deg);
content: '';
}

Step3.
Add CSS Animation
Add the snow:
.fall {
position: absolute;
z-index:15;
}
.snowFlakes1, .snowFlakes2, .snowFlakes3, .snowFlakes4, .snowFlakes5, .snowFlakes6, .snowFlakes7, .snowFlakes8, .snowFlakes9, .snowFlakes10 {
width:10px;
height: 10px;
border-radius:50%;
position: absolute;
background-color: white;
}
.snowFlakes1 {
top:10px;
left:80px;
animation: fall 7s linear infinite;
}
.snowFlakes2 {
top:10px;
left: 140px;
animation: fall 5s linear infinite;
}
.snowFlakes3 {
top:10px;
left: 70px;
animation: fall 5s linear infinite;
}
.snowFlakes4 {
top:10px;
left: 40px;
animation: fall 9s linear infinite;
}
.snowFlakes5 {
top:10px;
left: 190px;
animation: fall 9.5s linear infinite;
}
.snowFlakes6 {
top:10px;
left: 220px;
animation: fall 4s linear infinite;
}
.snowFlakes7 {
top:10px;
left: 250px;
animation: fall 13s linear infinite;
}
.snowFlakes8 {
top:10px;
left: 30px;
animation: fall 3s linear infinite;
}
.snowFlakes9 {
top:10px;
left: 130px;
animation: fall 7s linear infinite;
}
.snowFlakes10 {
top:10px;
left: 230px;
animation: fall 5s linear infinite;
}
Animate the snow:
@keyframes fall {
100% {transform: translateY(300px);}
}
Watch also the video tutorial:
Enjoy coding!
Read also: