SpaceHey's profile picture

Published by

published

Privacy: Link-only
Category: SpaceHey

View Blog View Profile Report Blog Entry

Advent 2023 - Day 11 - Animated gradient background!

Hi!
Did you know that you can use custom CSS to animated things on your profile?
Yesterdays post showed you how to use custom CSS to spin your profile pic, today you'll learn how to animate your profile's background!
<style>
body{
  background: linear-gradient(90deg, #0e66dd, #25d8d3);
  animation: gradient 10s ease infinite;
  background-size: 400% 400%;
}

@keyframes gradient{
  0%{ background-position: 0% 50%; }
  50%{ background-position: 100% 50%; }
  100%{ background-position: 0% 50%; }
}
</style>
You can replace the two #color-codes in the third line with different colors to change the gradient!
Have fun!