How to add an animated gradient background

This tutorial will show you how to create a gradient background to your website. This will work for Squarespace 7.1

Animated gradient backgrounds can bring a plethora of advantages to a website. Firstly, they add an element of dynamism and movement to the page, which can enhance the overall user experience. A static background can often appear flat and uninteresting, but an animated gradient background can create a sense of depth and texture that engages the user and keeps them on the page for longer. By animating the gradient, you can create a more immersive and interactive experience that draws the user's attention and encourages them to explore the content on the site.

Another advantage of animated gradient backgrounds is that they can help to create a mood or atmosphere that reflects the tone of the content. For example, a soft and subtle gradient animation can create a calming and relaxing atmosphere, while a bold and dynamic gradient can convey energy and excitement. This can be particularly useful for websites that offer creative or visual content, such as photography or design portfolios, as it can help to showcase the work in a more engaging and compelling way. Overall, an animated gradient background can be a powerful tool for enhancing the visual impact of a website, improving the user experience, and helping to communicate the tone and message of the content.

A useful tool you can use to identify the #collection-id, #blockidnumber and section[data-section-id="#"] is a Chrome Extension called Squarespace ID Finder (https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff) which we fully recommend.

A site I found useful for creating the necessary ccs code is called CSS GRADIENT ANIMATOR.

Complexity: Easy

---

Step 1

Identifiy the Section IDs for the section background using the plugin mentioned above. In this case it is section[data-section-id="5f0748fced03a8025828eef8"].

---

Step 2

To add the following CSS with the section ID, go to ‘Design’ and the ‘Custom CSS’, paste the code into the Custom CSS editor box.

section[data-section-id="5f0748fced03a8025828eef8"] .section-background {
    background: linear-gradient(270deg, #663324, #1d8ee6);
    background-size: 400% 400%;
    -webkit-animation: AnimationName 6s ease infinite;
    -moz-animation: AnimationName 6s ease infinite;
    -o-animation: AnimationName 6s ease infinite;
    animation: AnimationName 6s 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%}
}
@-o-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%}
}

How to add an animated gradient background

---

You can also look at our “How to add an gradient background” blog.

---

If you have any questions or need any help with your Squarespace website design, you can book a 1:1 consultation.

---

All work in this guide is provided ?“AS IS”. Other than as provided in this agreement, this guide makes no other warranties, express or implied, and hereby disclaims all implied warranties, including any warranty of fitness for a particular purpose.

If you require professional advice, we recommend that you purchase the services of a developer.