Jump to content

Animated gradient / smooth background transition help

Recommended Posts

Site URL: https://lime-wolverine-672z.squarespace.com/

Hello!

I am trying to figure out how to create an animated background on my (trial) site. I tried the most referenced option -

https://www.gradient-animator.com/

and set the id to my collection background:

#collection-60ea7161025aa46e30e0a38a {  

  .css-selector {

background: linear-gradient(270deg, #cfadea, #9b51d5, #7b658c);

    background-size: 600% 600%;

  

    -webkit-animation: AnimationName 30s ease infinite;

    -moz-animation: AnimationName 30s ease infinite;

    animation: AnimationName 30s 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%}

}

@keyframes AnimationName {

    0%{background-position:0% 50%}

    50%{background-position:100% 50%}

    100%{background-position:0% 50%}

}

  } 

 

I've also tried this code to no avail and set it to each section background (this is currently up):

section[data-section-id="60ea7162025aa46e30e0a4bd"] .section-background {

    background-image: linear-gradient(100deg,#3874ba,#edccc9) !important;

    background-size: 400% !important;

    text-fill-color: transparent;

    -webkit-text-fill-color: transparent;

    -webkit-animation: Gradient 10s ease infinite !important;

    -moz-animation: Gradient 10s ease infinite !important;

    animation: Gradient 10s ease infinite !important;

}



section[data-section-id="60ea7162025aa46e30e0a4bb"] .section-background {

    background-image: linear-gradient(100deg,#3874ba,#edccc9) !important;

    background-size: 400% !important;

    text-fill-color: transparent;

    -webkit-text-fill-color: transparent;

    -webkit-animation: Gradient 10s ease infinite !important;

    -moz-animation: Gradient 10s ease infinite !important;

    animation: Gradient 10s ease infinite !important;

}



section[data-section-id="60ea715052638457540dc335"] .section-background {

    background-image: linear-gradient(100deg,#3874ba,#edccc9) !important;

    background-size: 400% !important;

    text-fill-color: transparent;

    -webkit-text-fill-color: transparent;

    -webkit-animation: Gradient 10s ease infinite !important;

    -moz-animation: Gradient 10s ease infinite !important;

    animation: Gradient 10s ease infinite !important;

}

 

Am I missing a code block or class id? Do I need to have a business plan for the animations to work? Or are my eyes deceiving me?

 

Here is my site: https://lime-wolverine-672z.squarespace.com/ and login is pine212apple

 

 

Thank you for your help!

Link to comment

Sure,

For the animated gradient, at the beginning of the code, change ".css-selector" to  ".section-background" See the first four lines of the original code below for where it appears (and of course change the collection to your block id).

 

#collection-60ea7161025aa46e30e0a38a {  

  .css-selector {

background: linear-gradient(270deg, #cfadea, #9b51d5, #7b658c);

    background-size: 600% 600%;
Link to comment
  • 1 year later...

Hello! I tried this out and it worked great, thank you! So far I've applied it to my homepage (see link below).

https://tinycoastdigital.com/

Perhaps this is a silly question, but I was hoping that maybe the animation would only go from the top of the page to the footer. So rather than continuing, the animation stops at the footer and only resumes if you scroll back to the top of the page. 

Does anyone know if this is possible and how it might be achieved? Thanks so much 🙂

Link to comment
  • 8 months later...

Hey! Can anyone help me out why this code is having zero effect? There is no website to show yet, I'm trying to nail the background effect before I begin designing anything else, so it's currently a nearly blank website. I can't identify what is wrong. The goal is coding the effect with 3 colors.

 

Quote

#collection-64f61a81a2bc902dfede8a5f  {
.css-selector {
    background: linear-gradient(274deg, #fdff70, #b3c3cf, #8e7faf);
    background-size: 600% 600%;
    -webkit-animation: AnimationName 23s ease infinite;
    -moz-animation: AnimationName 23s ease infinite;
    -o-animation: AnimationName 23s ease infinite;
    animation: AnimationName 23s ease infinite;
}
@-webkit-keyframes AnimationName {
    0%{background-position:42% 0%}
    50%{background-position:59% 100%}
    100%{background-position:42% 0%}
}
@-moz-keyframes AnimationName {
    0%{background-position:42% 0%}
    50%{background-position:59% 100%}
    100%{background-position:42% 0%}
}
@-o-keyframes AnimationName {
    0%{background-position:42% 0%}
    50%{background-position:59% 100%}
    100%{background-position:42% 0%}
}
@keyframes AnimationName {
    0%{background-position:42% 0%}
    50%{background-position:59% 100%}
    100%{background-position:42% 0%}
}
}

 

Link to comment
On 9/5/2023 at 10:24 PM, newloreco said:

Hey! Can anyone help me out why this code is having zero effect? There is no website to show yet, I'm trying to nail the background effect before I begin designing anything else, so it's currently a nearly blank website. I can't identify what is wrong. The goal is coding the effect with 3 colors.

 

 

This class name doesn't exist in SS, you will need to adjust it for your site

.css-selector

If you share link to your site & let me know which section you want to apply, we can check & give exact class name

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 9/8/2023 at 3:47 AM, newloreco said:

The entire background, honestly. Website is going to be one uninterrupted section, so even if it just applies to the first block I can expand it as necessary.

You mean first section or whole homepage? Use this code for first section, if you want for whole page, let me know, I will adjust the code

[data-section-id="64f61a81a2bc902dfede8a62"] .section-background-content {
    opacity: 0;
}
[data-section-id="64f61a81a2bc902dfede8a62"] .section-background {
    background: linear-gradient(274deg, #fdff70, #b3c3cf, #8e7faf);
    background-size: 600% 600%;
    -webkit-animation: AnimationName 23s ease infinite;
    -moz-animation: AnimationName 23s ease infinite;
    -o-animation: AnimationName 23s ease infinite;
    animation: AnimationName 23s ease infinite;
}
@-webkit-keyframes AnimationName {
    0%{background-position:42% 0%}
    50%{background-position:59% 100%}
    100%{background-position:42% 0%}
}
@-moz-keyframes AnimationName {
    0%{background-position:42% 0%}
    50%{background-position:59% 100%}
    100%{background-position:42% 0%}
}
@-o-keyframes AnimationName {
    0%{background-position:42% 0%}
    50%{background-position:59% 100%}
    100%{background-position:42% 0%}
}
@keyframes AnimationName {
    0%{background-position:42% 0%}
    50%{background-position:59% 100%}
    100%{background-position:42% 0%}
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 9/11/2023 at 9:45 PM, newloreco said:

If it's possible for the entire website that would be amazing. Thank you so much!

Use this new code

.section-background-content {
    opacity: 0;
}
section, .section-border, .section-background {
    background-color: transparent !important;
}
body {
    background: linear-gradient(274deg, #fdff70, #b3c3cf, #8e7faf);
    background-size: 600% 600%;
    -webkit-animation: AnimationName 23s ease infinite;
    -moz-animation: AnimationName 23s ease infinite;
    -o-animation: AnimationName 23s ease infinite;
    animation: AnimationName 23s ease infinite;
}
@-webkit-keyframes AnimationName {
    0%{background-position:42% 0%}
    50%{background-position:59% 100%}
    100%{background-position:42% 0%}
}
@-moz-keyframes AnimationName {
    0%{background-position:42% 0%}
    50%{background-position:59% 100%}
    100%{background-position:42% 0%}
}
@-o-keyframes AnimationName {
    0%{background-position:42% 0%}
    50%{background-position:59% 100%}
    100%{background-position:42% 0%}
}
@keyframes AnimationName {
    0%{background-position:42% 0%}
    50%{background-position:59% 100%}
    100%{background-position:42% 0%}
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 4 months later...

Hello,

If anyone could share a bit of insight. I'd greatly appreciate it. 

I used the code above to help me with a website I am working on. However, I want the whole site's background gradient to be cohesive. Right now the header area doesn't update.  See the code below. See the website here. Password :  green.

On 9/14/2023 at 4:24 AM, tuanphan said:

Use this new code

.section-background-content {
    opacity: 0;
}
section, .section-border, .section-background {
    background-color: transparent !important;
}

header {
    background: linear-gradient( #57BD18, #19946B, #036A31);
    background-size: 600% 600%;
    -webkit-animation: AnimationName 23s ease infinite;
    -moz-animation: AnimationName 23s ease infinite;
    -o-animation: AnimationName 23s ease infinite;
    animation: AnimationName 23s ease infinite;
}
@-webkit-keyframes AnimationName {
    0%{background-position:42% 0%}
    50%{background-position:59% 100%}
    100%{background-position:42% 0%}
}
@-moz-keyframes AnimationName {
    0%{background-position:42% 0%}
    50%{background-position:59% 100%}
    100%{background-position:42% 0%}
}
@-o-keyframes AnimationName {
    0%{background-position:42% 0%}
    50%{background-position:59% 100%}
    100%{background-position:42% 0%}
}
@keyframes AnimationName {
    0%{background-position:42% 0%}
    50%{background-position:59% 100%}
    100%{background-position:42% 0%}
}


body {
    background: linear-gradient( #57BD18, #19946B, #036A31);
    background-size: 600% 600%;
    -webkit-animation: AnimationName 23s ease infinite;
    -moz-animation: AnimationName 23s ease infinite;
    -o-animation: AnimationName 23s ease infinite;
    animation: AnimationName 23s ease infinite;
}
@-webkit-keyframes AnimationName {
    0%{background-position:42% 0%}
    50%{background-position:59% 100%}
    100%{background-position:42% 0%}
}
@-moz-keyframes AnimationName {
    0%{background-position:42% 0%}
    50%{background-position:59% 100%}
    100%{background-position:42% 0%}
}
@-o-keyframes AnimationName {
    0%{background-position:42% 0%}
    50%{background-position:59% 100%}
    100%{background-position:42% 0%}
}
@keyframes AnimationName {
    0%{background-position:42% 0%}
    50%{background-position:59% 100%}
    100%{background-position:42% 0%}
}

 

 

Link to comment
On 1/30/2024 at 6:56 AM, FloandGo said:

Hello,

If anyone could share a bit of insight. I'd greatly appreciate it. 

I used the code above to help me with a website I am working on. However, I want the whole site's background gradient to be cohesive. Right now the header area doesn't update.  See the code below. See the website here. Password :  green.

 

Use this code under

.header-background-solid, header#header {
    background-color: transparent !important;
}
.header-border {
    border: none !important;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.