You can send your questions to my email to get faster answer in 24 hours (free).
Buy me a coffee

A gradient animation accross multiple Sections

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>

A-single- Background-Image-across-Multiple-Sections-01-min

#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%;
    }
}

A-gradient-animation-across-multiple-sections-01-min

#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>

A-gradient-background-across-multiple-sections-02-min

Ask me a question, free

If your site is private or in trial, just setup password and share url. See how to: https://beaverhero.com/squarespace-how-to/
Please check your email carefully. Recently I got a lot of questions with wrong emails.

If you haven't heard from me within 24 hours please check your junk/spam folder