Create CSS Gradient Animations Effortlessly ?

Here’s a preview of what we’ll make ?

1. Create a gradient

I’ll save mine in a variable for easy reuse.

:root {
–main-gradient: linear-gradient(-66deg, #15162a, #000, #291a33, #000, #381a2c, #000, #121e42);
}

2. Cre…


This content originally appeared on DEV Community and was authored by Jordi Enric

Here's a preview of what we'll make ?

1. Create a gradient

I'll save mine in a variable for easy reuse.

:root {
  --main-gradient: linear-gradient(-66deg, #15162a, #000, #291a33, #000, #381a2c, #000, #121e42);
}

2. Create a container div and add the background

We use background-size to zoom into the gradient.

.container {
  background: var(--main-gradient);
  background-size: 400%;
}

3. Create the animation

This is a basic animation that changes the background-position. Since we zoomed into the gradient it will look like it's moving.

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 00% 50%;
  }
}

4. Add the animation to our container! 

.container {
  background: var(--main-gradient);
  background-size: 400%;
  animation: gradient 8s ease infinite;
}

You can check the codepen here

And that's it!

If you enjoy this content consider following me on twitter


This content originally appeared on DEV Community and was authored by Jordi Enric


Print Share Comment Cite Upload Translate Updates
APA

Jordi Enric | Sciencx (2021-04-28T17:02:59+00:00) Create CSS Gradient Animations Effortlessly ?. Retrieved from https://www.scien.cx/2021/04/28/create-css-gradient-animations-effortlessly-%f0%9f%8c%8c/

MLA
" » Create CSS Gradient Animations Effortlessly ?." Jordi Enric | Sciencx - Wednesday April 28, 2021, https://www.scien.cx/2021/04/28/create-css-gradient-animations-effortlessly-%f0%9f%8c%8c/
HARVARD
Jordi Enric | Sciencx Wednesday April 28, 2021 » Create CSS Gradient Animations Effortlessly ?., viewed ,<https://www.scien.cx/2021/04/28/create-css-gradient-animations-effortlessly-%f0%9f%8c%8c/>
VANCOUVER
Jordi Enric | Sciencx - » Create CSS Gradient Animations Effortlessly ?. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/04/28/create-css-gradient-animations-effortlessly-%f0%9f%8c%8c/
CHICAGO
" » Create CSS Gradient Animations Effortlessly ?." Jordi Enric | Sciencx - Accessed . https://www.scien.cx/2021/04/28/create-css-gradient-animations-effortlessly-%f0%9f%8c%8c/
IEEE
" » Create CSS Gradient Animations Effortlessly ?." Jordi Enric | Sciencx [Online]. Available: https://www.scien.cx/2021/04/28/create-css-gradient-animations-effortlessly-%f0%9f%8c%8c/. [Accessed: ]
rf:citation
» Create CSS Gradient Animations Effortlessly ? | Jordi Enric | Sciencx | https://www.scien.cx/2021/04/28/create-css-gradient-animations-effortlessly-%f0%9f%8c%8c/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts