Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Custom Gradient CSS Background in a section


sumcwan

Question

Posted (edited)

Site URL: https://flower-springtail-8n3z.squarespace.com/

I'm trying to achieve this effect for a section on my site: https://codepen.io/P1N2O/pen/pyBNzX

I am able to identify the section then applied the gradient, I just can't figure to animate it. Can anyone tell me how to solve this?

[data-section-id="608a398bf571e2467b77682d"] .section-background {
  	background: linear-gradient(45deg, #2242c1, #2beadb) !important;
	background-size: 200% 200% !important;
  	-webkit-animation: AnimationName 5s ease infinite !important;
    -moz-animation: AnimationName 5s ease infinite !important;
    animation: AnimationName 5s ease infinite !important;
}

@-webkit-keyframes AnimationName {
    0%{background-position:0% 51%}
    50%{background-position:100% 50%}
    100%{background-position:0% 51%}
}
@-moz-keyframes AnimationName {
    0%{background-position:0% 51%}
    50%{background-position:100% 50%}
    100%{background-position:0% 51%}
}
@keyframes AnimationName {
    0%{background-position:0% 51%}
    50%{background-position:100% 50%}
    100%{background-position:0% 51%}
}

 

Edited by sumcwan
Link to post
  • Answers 2
  • Created
  • Last Reply

Top Posters For This Question

Popular Days

Top Posters For This Question

Popular Posts

This snippet works [data-section-id="608a398bf571e2467b77682d"] .section-background {     background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);     background-size: 400% 400%;  

Site URL: https://flower-springtail-8n3z.squarespace.com/ I'm trying to achieve this effect for a section on my site: https://codepen.io/P1N2O/pen/pyBNzX I am able to identify the section then

@bangank36 It works! Thank you very much!

2 answers to this question

Recommended Posts

  • 0

This snippet works

[data-section-id="608a398bf571e2467b77682d"] .section-background {
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
}

@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

 

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Portfolio hover Replace Link Style
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to post

Create an account or sign in to comment

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


×
×
  • Create New...