← Back to Layouts
scene layout rainbow

Name: FriendRewind
Author: FriendRewind
Author: B1onks
Category: Emo/Scene
Created: July 18, 2026
Scene
Comments (0)

No comments yet. Be the first!
You must log in to comment.
CSS Code

<style>
<style>

body {
animation: RainbowEffect 1s linear infinite;
}

@keyframes RainbowEffect {
0% {
filter: hue-rotate(0deg);
}

25% {
filter: hue-rotate(90deg);
}

50% {
filter: hue-rotate(180deg);
}

75% {
filter: hue-rotate(270deg);
}

100% {
filter: hue-rotate(360deg);
}
}

</style>






<style>

body {
background-image: url(https://i.pinimg.com/originals/0f/37/c8/0f37c8e9aa6101b14e91a875ea6366d8.gif);
background-size: 500px;
background-attachment: fixed;
}

<style>
  
  
  
  <div class="falling-gif">
  <div class="falling-gif"><img src="https://pixels.crd.co/assets/images/gallery02/f3852079.gif?v=29416114" /></div>
  <div class="falling-gif"><img src="https://pixels.crd.co/assets/images/gallery40/85b594eb.gif?v=29416114" /></div>
  <div class="falling-gif"><img src="https://pixels.crd.co/assets/images/gallery14/048e192c.gif?v=29416114" /></div>
  <div class="falling-gif"><img src="https://pixels.crd.co/assets/images/gallery60/e2cf6606.gif?v=29416114" /></div>
  <div class="falling-gif"><img src="https://pixels.crd.co/assets/images/gallery24/34e2b89a.gif?v=29416114" /></div>
  <div class="falling-gif"><img src="https://pixels.crd.co/assets/images/gallery12/0e8ff38a.gif?v=29416114" /></div>
  <div class="falling-gif"><img src="https://pixels.crd.co/assets/images/gallery09/7c43c0cc.gif?v=29416114" /></div>
  <div class="falling-gif"><img src="https://pixels.crd.co/assets/images/gallery45/0a31bb3f.gif?v=29416114" /></div>
</div>

<style>
  @-webkit-keyframes falling-gif-fall {
    0% {
      top: -10%;
    }
    100% {
      top: 100%;
    }
  }
  @keyframes falling-gif-fall {
    0% {
      top: -10%;
    }
    100% {
      top: 100%;
    }
  }
  .falling-gif {
    position: fixed;
    top: -10%;
    z-index: 9999;  /* Change the value to -1 to add the animation to the background */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: default;
    -webkit-animation-name: falling-gif-fall;
    -webkit-animation-duration: 5s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-name: falling-gif-fall;
    animation-duration: 5s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  }

/* Specifics to make a more natural fall effect. Feel free to change */
  .falling-gif:nth-of-type(0) {
    left: 1%;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
  }
  .falling-gif:nth-of-type(1) {
    left: 10%;
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
  }
  .falling-gif:nth-of-type(2) {
    left: 20%;
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
  }
  .falling-gif:nth-of-type(3) {
    left: 30%;
    -webkit-animation-delay: 3s;
    animation-delay: 3s;
  }
  .falling-gif:nth-of-type(4) {
    left: 40%;
    -webkit-animation-delay: 1.5s;
    animation-delay: 1.5s;
  }
  .falling-gif:nth-of-type(5) {
    left: 50%;
    -webkit-animation-delay: 2.5s;
    animation-delay: 2.5s;
  }
  .falling-gif:nth-of-type(6) {
    left: 60%;
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
  }
  .falling-gif:nth-of-type(7) {
    left: 70%;
    -webkit-animation-delay: 3s;
    animation-delay: 3s;
  }
</style>






<style>
body:before {
content: " ";
height: 100vh;
width: 100vw;
display: block;
position: fixed; 
top: 0; 
left: 0; 
z-index: 100;
background-image: url('https://i.pinimg.com/originals/d1/19/0e/d1190e3105162aae9586a393164e83c1.gif');
background-size: cover;
background-repeat: no-repeat;
background-position:center;
animation: yourAnimation 2s ease 0s 1 normal forwards;
pointer-events: none;}
@keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} } 
</style>


<style>
  @import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap');</style>  
 p{


.oswald-<uniquifier> {
  font-family: "Oswald", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  colour: White;
 }
  </style></style>