Skip to content

Instantly share code, notes, and snippets.

@ahdezm

ahdezm/dabblet.css

Last active May 17, 2021 11:31
Show Gist options
  • Star 10 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save ahdezm/3561324 to your computer and use it in GitHub Desktop.
Save ahdezm/3561324 to your computer and use it in GitHub Desktop.
Download ZIP
CSS Animated Repeating Gradient
Raw
dabblet.css
/**
* CSS Animated Repeating Gradient
*/
body {
background: repeating-linear-gradient(-45deg,red,red 20px,blue 20px,blue 40px);
background-size:56px 56px;/* This is unique for this background, need to find a pattern and develop a formula */
background-position-x:0%;
-webkit-animation:'slide' 20s infinite linear forwards;
}
@-webkit-keyframes 'slide' {
0%{
background-position-x:0%;
}
100% {
background-position-x:100%;
}
}
@behnood-eghbali
Copy link

There's a nice website by Ian Forrest that you can create animated gradients with it.
There's also an awesome code in Codepen. Cheers! :)

@mikeevstropov
Copy link

Thank you!

@mrOrlando
Copy link

I'd replace the background property with the background-image because it can cause issues if someone will switch the order of the rules.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment