Tip of the week: Gradient Animator

Published by | Add Comment

Today's post will be the first of a weekly series in which I share something useful in the form of a tip or resource you may not be aware of.

For this weeks tip I want to share with you a way to apply css animated gradients to your section backgrounds. For this tip we will be making use of  CSS Gradient Animator by Ian Forest.

gradient animator

Where to begin.

To begin you first need to select 2 or more colors.

You should notice that as you add your colors and adjust the angle the CSS in the box  will automatically be updated. Once you think you have some that you are satisfied with preview it and copy and paste it to notepad or code editor.

The fun stuff.

Before we can apply the gradient to our section we need to make some changes because currently all you have is a bunch of CSS that is not targeting anything and we need to fix that.

(Bad) The CSS generated by the gradient animator.

background: linear-gradient(270deg, #127d62, #9b4205);
background-size: 400% 400%;

-webkit-animation: AnimationName 17s ease infinite;
-moz-animation: AnimationName 17s ease infinite;
animation: AnimationName 17s ease infinite;

@-webkit-keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes AnimationName { 
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

(Good) We need to add a custom class and wrap the first 5 lines in {} now when we add out custom class to the custom area of our section it will target the background.

.custom-class {
background: linear-gradient(270deg, #127d62, #9b4205);
background-size: 400% 400%;
-webkit-animation: AnimationName 17s ease infinite;
-moz-animation: AnimationName 17s ease infinite;
animation: AnimationName 17s ease infinite;
}

@-webkit-keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes AnimationName { 
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

Now all that remains is the add you custom class to your section and you should see some gradient magic. see example

I hope you enjoyed this brief weekly tip as always like and share to your fingers hurt.

About the author

Aires Dagraca, is the creative force behind Dagraca Creative, a Web Design Company that focuses on bringing the best web experience to their clients. He also enjoys Gaming, Web Design, Graphic design and family time with his wife and kids.

A special note from the author.

iHeart pagelines

Leave a Reply

Your email address will not be published. Required fields are marked *


Let's build something great together.

iHeart PageLines

  • 7 Free sections
  • Tutorials and Tips
  • Great Support
  • Custom Sections
Join For Free !!!

Error: Please enter a valid email address

Error: Invalid email

Error: Please enter your first name

Error: Please enter your last name

Error: Please enter a username

Error: Please enter a password

Error: Please confirm your password

Error: Password and password confirmation do not match