Drop us a message
You're at the right place now! How can we help?
Animated color transitions are useful and stylish visual effects. For these, you can make settings such as gradient size and color selections in Quadra. Moreover, no CSS or jQuery is required for these.
Just add the ".animated-gradient" class for the animation, adjust the size with "data-gradient-size", and select your animated colors with "data-gradient-bg".
You can do it all on one element. Moreover, you can use these elements multiple times on the same page.
These gradient animations are optimized for faster browser performance as "only works when visible". In other words, gradient animations that do not appear on the screen will not work and will not cause performance loss in the browser.
Just adjust the colors. You can also use Quadra's templates. You can place any element on it and adjust its position. Gradient animation will run automatically.
Animated gradient transitions are super easy to use. It will work directly in any relative element. The element of the above gradient animation is just this:
<div class="animated-gradient active-inview" data-gradient-size="600" data-gradient-bg="#1a2a6c, #b21f1f, #fdbb2d, #9733EE"></div>
Gradient animations can remain on the background of the parent element. You can use any image or SVG design in the background of the parent element and can be used with Lazy Load. Other elements should be used with a higher z-index, as in templates.
You can use this template on your website with copy and paste just like other-all templates. Example usage is as follows:
<div class="animated-gradient active-inview opacity-8" data-gradient-size="600" data-gradient-bg="#1a2a6c, #b21f1f, #fdbb2d, #9733EE"></div>
You can use gradient animation on videos. And you can capture the most stylish image by reducing the opacity of the gradient animation.
This template is the same as the previous one. Only responsive video is added to the parent element. You can easily replace the link and use it with your own video. If you want it to work continuously, you can add the ".inview" class and delete the ".active-inview" class. Then the animation will always play.
You're at the right place now! How can we help?