code snippet: rainbow glow effect around main container

/* === rainbow glow effect by seal @talkingheads === */

/*setting color variables*/

:root{

  --red: #eb6363ff;
  --orange: #ebc063ff;
  --yellow: #ebeb63ff;
  --green: #63eb6eff;
  --cyan: #63ebe6ff;
  --purple: #9963ebff;
  --pink: #eb63c2ff;
}
/*creating the animation*/
@keyframes glowrainbow{
  0%{
    box-shadow: 0 0 5em 2em var(--red);
  }
  16%{
    box-shadow:0 0 5em 2em var(--orange);
  }
  32%{
    box-shadow: 0 0 5em 2em var(--yellow);
  }
  48%{
    box-shadow: 0 0 5em 2em var(--green);
  }
  64%{
    box-shadow: 0 0 5em 2em var(--cyan);
  }
  80%{
    box-shadow: 0 0 5em 2em var(--purple);
  }
  90%{
    box-shadow: 0 0 5em 2em var(--pink);
  }
  100%{
    box-shadow:0 0 5em 2em var(--red);
  }
}
/*applying the animation*/
body > .container{
  animation:30s glowrainbow infinite;
}
/*end of rainbow glow effect code*/

troubleshooting:

if it doesn't seem to be working, first try moving the code to the very end of your style section!

if you have other box-shadow effects present on the main container, it could cause issues, and you may have to remove the other code

if you have any issues after trying that, comment here and i can try to help you!

notes:

i do not actually care at all if you leave the credit in! feel free to take it out if you wanna separate the code blocks to organize your code or something

you can change the color hex codes to something else if you want! just leave the variable names (or make sure to change them in the @keyframes block)

this works on both blog posts and on profiles

if you want to make the color change faster or slower, change the line in the body > .container block from 30s (30 seconds) for a full animation cycle to however long you want it to be!

28 Kudos