This members-only tutorial provides the steps to set up a gradient animation as background for a section in Oxygen using Granim.js.

Note: The actual animation will be smoother unlike what got captured in the above screencast. See the examples page for a realistic idea.

Step 1

Add a Section in the Oxygen editor.

Since you will most likely be having white color text in the Section, you might want to set the starting color in the gradient pair as a Background Color. In this example, let's set it to #aa076b.

Set Text Color to #ffffff.

To ensure that the gradient animation is seen, let's bump up the height of the Section by increasing the top and bottom padding from the default 75px to say, 100px each.

This is a premium members-only content.

To view the rest of the content, please sign up for membership ($47/month or $399 one-time).

Already a member? Log in below or here.

Need help implementing a tutorial in your site or want to hire me for custom work?


Find the article helpful and wish to donate?



You need to be logged in to view and post comments.
Not a member yet? Join here.
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
%d bloggers like this: