# Snow animation?

**URL:** https://community.glideapps.com/t/snow-animation/55760
**Category:** Ask for Help
**Tags:** custom-code
**Created:** [December 15, 2022, 9:59am UTC](https://community.glideapps.com/t/snow-animation/55760 "2022-12-15T09:59:31Z")
**Posts on this page:** 14
**Page:** 1

<div class="post-metadata">

### Author: ![Thoughts](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thoughts/32/46790_2.png) [@Thoughts](https://community.glideapps.com/u/Thoughts)
#### Post date: [December 15, 2022, 9:59am UTC](https://community.glideapps.com/t/snow-animation/55760/1 "2022-12-15T09:59:31Z")

</div>

Hey,  
Any way to add snowflakes animation to glide?  
trying to add some holiday spirit to the app ❄🎅

references:

> **[15+ CSS Snow Effects](https://freefrontend.com/css-snow-effects/)**
>
> As winter approaches, what better way to embrace the season than by incorporating a touch of snow into your website? With our November 2022 update, we are thrilled to present five new additions that can seamlessly integrate into your web projects.

Thanks 🙂

---

<div class="post-metadata">

### Author: ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)
#### Post date: [December 15, 2022, 10:05am UTC](https://community.glideapps.com/t/snow-animation/55760/2 "2022-12-15T10:05:26Z")

</div>

yes, add a rich component with a gif image or CSS for that effect, and set opacity to 0.2, and z-index to -1

---

<div class="post-metadata">

### Author: ![Thoughts](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thoughts/32/46790_2.png) [@Thoughts](https://community.glideapps.com/u/Thoughts)
#### Post date: [December 15, 2022, 10:07am UTC](https://community.glideapps.com/t/snow-animation/55760/3 "2022-12-15T10:07:43Z")

</div>

How do I do that?  
I created a Rich Text component and tried pasting some codes from the link I shared but nothing happend.  
This is why I ask here 🙂

---

<div class="post-metadata">

### Author: ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)
#### Post date: [December 15, 2022, 10:10am UTC](https://community.glideapps.com/t/snow-animation/55760/4 "2022-12-15T10:10:14Z")

</div>

your sample will not work in glide, there is no body to address, let me make you something similar 😉

---

<div class="post-metadata">

### Author: ![Thoughts](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thoughts/32/46790_2.png) [@Thoughts](https://community.glideapps.com/u/Thoughts)
#### Post date: [December 15, 2022, 10:13am UTC](https://community.glideapps.com/t/snow-animation/55760/5 "2022-12-15T10:13:03Z")

</div>

Thank you very much! much appreciated…  
Yes, it’s nothing crucial - but I thought it might be nice to spice it up for the holidays, and maybe others can use it too

I hope I will be able to learn from your code so that I will be able to do stuff like this myself in the future 🙏

---

<div class="post-metadata">

### Author: ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)
#### Post date: [December 15, 2022, 10:16am UTC](https://community.glideapps.com/t/snow-animation/55760/6 "2022-12-15T10:16:18Z")

</div>

give me few minutes, i have a customer call

---

<div class="post-metadata">

### Author: ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)
#### Post date: [December 15, 2022, 11:08am UTC](https://community.glideapps.com/t/snow-animation/55760/7 "2022-12-15T11:08:33Z")

</div>

I’m back, sorry for the delay, Here is your code… Happy Holidays!

```auto
<div class="snow" target="_blank">
<img src="https://storage.googleapis.com/glide-prod.appspot.com/uploads-v2/wZj1I0tsGWmQvEZOs0gh/pub/9B13dgMIoL4vXUP4a8qE.gif">
</div>

<pre><span><style>
    body{ margin: 0; padding: 0; }
    .snow { width: 100% ;
    height:100% ;
    position: fixed ;
    top:0;
    left:0%;
    opacity: 0.3;
    z-index:1;
    pointer-events: none;
    }
    .snow img { width: 100% ;
    height:100% ;
    object-fit: cover ;
    }

```

---

<div class="post-metadata">

### Author: ![Thoughts](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thoughts/32/46790_2.png) [@Thoughts](https://community.glideapps.com/u/Thoughts)
#### Post date: [December 15, 2022, 11:14am UTC](https://community.glideapps.com/t/snow-animation/55760/8 "2022-12-15T11:14:04Z")

</div>

> [@Uzo](#):
>
> ```auto
> <div class="snow" target="_blank">
> <img src="https://storage.googleapis.com/glide-prod.appspot.com/uploads-v2/CQNxCG5PhSp7XuIYn1xE/pub/FApnCmQfMd2LE8FV7znP.gif">
> </div>
> 
> <pre><span><style>
> body{ margin: 0; padding: 0; }
> .snow { width: 100% ;
> height:100% ;
> position: fixed ;
> top:0;
> left:0%;
> opacity: 0.3;
> z-index:-1;
> pointer-events: none;
> }
> .snow img { width: 100% ;
> height:100% ;
> object-fit: cover ;
> }
> 
> ```

AMAZING!  
THANK YOU VERY MUCH!

Wishing you a truly wonderful holiday season filled with peace and love! 🎄🎅

---

<div class="post-metadata">

### Author: ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)
#### Post date: [December 15, 2022, 11:14am UTC](https://community.glideapps.com/t/snow-animation/55760/9 "2022-12-15T11:14:34Z")

</div>

thank you! You too.

> **[Code BOOK - Desktop](https://code-book-desktop.glideapp.io/dl/da19fa/s/04a872/r/XBfIHv6iTeiZWrrQTEdseA)**
>
> share cool CSS, scripts and links

---

<div class="post-metadata">

### Author: ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)
#### Post date: [December 15, 2022, 11:35am UTC](https://community.glideapps.com/t/snow-animation/55760/10 "2022-12-15T11:35:37Z")

</div>

I edited the z-index to 1, so it will blend better with elements with nontransparent backgrounds… but if you need them to stand out, keep it at -1

---

<div class="post-metadata">

### Author: ![David\_Gabler](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/david_gabler/32/44332_2.png) [@David\_Gabler](https://community.glideapps.com/u/David_Gabler)
#### Post date: [December 15, 2022, 11:52am UTC](https://community.glideapps.com/t/snow-animation/55760/11 "2022-12-15T11:52:35Z")

</div>

Way to go UZO! And thanks for the thought @Thoughts!

I love it!

---

<div class="post-metadata">

### Author: ![slscustom.ru](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/slscustom.ru/32/77336_2.png) [@slscustom.ru](https://community.glideapps.com/u/slscustom.ru)
#### Post date: [December 15, 2022, 1:30pm UTC](https://community.glideapps.com/t/snow-animation/55760/12 "2022-12-15T13:30:30Z")

</div>

> [@Uzo](#):
>
> ```auto
> <div class="snow" target="_blank">
> <img src="https://storage.googleapis.com/glide-prod.appspot.com/uploads-v2/CQNxCG5PhSp7XuIYn1xE/pub/FApnCmQfMd2LE8FV7znP.gif">
> </div>
> 
> <pre><span><style>
> body{ margin: 0; padding: 0; }
> .snow { width: 100% ;
> height:100% ;
> position: fixed ;
> top:0;
> left:0%;
> opacity: 0.3;
> z-index:-1;
> pointer-events: none;
> }
> .snow img { width: 100% ;
> height:100% ;
> object-fit: cover ;
> }
> 
> ```

Really Santa Uzo!!! Thankyou very mutch!

---

<div class="post-metadata">

### Author: ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)
#### Post date: [December 15, 2022, 2:29pm UTC](https://community.glideapps.com/t/snow-animation/55760/13 "2022-12-15T14:29:36Z")

</div>

Happy Holidays to You!

---

<div class="post-metadata">

### Author: ![AnnabelleDay](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/annabelleday/32/64107_2.png) [@AnnabelleDay](https://community.glideapps.com/u/AnnabelleDay)
#### Post date: [September 15, 2023, 10:23am UTC](https://community.glideapps.com/t/snow-animation/55760/14 "2023-09-15T10:23:46Z")

</div>

Thanks for the help Uzo, been looking for something similar for a while