How to code falling stars?

I have found this webpage where the code for falling snow is. Is there anyone who can tell me how I can change it to stars instead of snow?

Thank you very much

I haven’t tried it out but the .snowflake is a circle because border-radius is set to 50%. Go to the clippy generator (clip-path) website pick a shape, copy the css and replace border radius in the .snowflake style with the clip-path code. If that doesn’t work, Ill have a better look at it.
Or alternatively use a css shape generator (it may be more performant).

1 Like

Another option is to use a star image and put it inside the div :grinning:


Good idea, way more realistic than a basic shape, make sure u strip out the background of the star image. Theres loads of tutorials out there. Here’s a basic one using inkscape (open source).

Good luck :slightly_smiling_face:
1 Like

Thank you very much @steve.mills, it works now :star_struck: :grinning:

No worries its Kirupa’s code that makes the animation work…:slightly_smiling_face:

1 Like

True :grinning:@steve.mills, Do you how how I can make them into different colors? So, some of the stars is yellow and some are black. :grinning:

#snowflakeContainer:nth-child(even){background-color: pink}
#snowflakeContainer:nth-child(odd){background-color: purple},
And remove the background-color in snowflake.

1 Like

Thanks @steve.mills :blush:, it is some years since I last coded css and javascript so I have some problems remembering how to code it correct​:wink:. What I can see it should stand under ? but then there are no stars… Is it the right place to place it?

My Bad, the CSS doesn’t apply to the cloned nodes. This is a quick work around. Paste the below code at the end of
“function generateSnowflakes() {”
after the block of code with the comments:
“// create our Snowflake object”
(right at the end of the function but inside it)
let flakes = document.querySelectorAll(’.snowflake’);
for(i=0; i< flakes.length; i++){
i%2 == 0 ? flakes[i].style.backgroundColor = ‘yellow’ :
flakes[i].style.backgroundColor = ‘white’;

No problem, your help is really appreciated @steve.mills :blush:. Have I placed it correct? because all the snow (stars) is gone

Yeah that’s right,
Try past this CSS in.(replace the current CSS)

        background-color: black;


    #snowflakeContainer {

      position: absolute;

      left: 0px;

      top: 0px;

      display: none;



    .snowflake {

      position: fixed;

      user-select: none;

      z-index: 1000;

      pointer-events: none;

      width: 10px;

      height: 10px;

      clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);


@steve.mills Hmm it is strange, it still doesnt work… Have I done it correct?:blush:

@steve.mills thanks for all of you help, I really appreciated it😊. I solved with this code
if (initialXPos > browserWidth / 2) {
var color = “#FFFFFF”;
} else {
var color = “#816E6A”;

no dramas, good work

1 Like