To make a gradient animation background span between multiple sections, you can follow these steps
#1. Suppose you need to do this for Section 1, Section 2, and Section 3.
First, you need to edit 3 Sections > Add Code block on each section > Paste this code
<span class="span-section"></span>
#2. Add this code to the Custom CSS box and click Save
/* Span gradient animation background between sections */ .span-section-parent { & { background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab); background-size: 400% 400%; animation: gradient 15s ease infinite; } .section-background, .section-border, section { background-color: transparent !important; } } @keyframes gradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
#3. Add this code to Code Injection > Footer
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> <script> $(document).ready(function() { $('.code-block .span-section').closest('section.page-section').addClass('span-section'); $('section.span-section').wrapAll('<section class="span-section-parent"></section>'); }); </script>