How to add css animated gradients or gradations to one section at a specific size?

Hello,

I'm trying to add an animated gradient or gradation to one specific section just below the header on my homepage.

The code I'm using below does not target the specific section, and has little effect on the size of the animated background which also repeats in other sections.

/*Animated CSS Gradations*/
.section, .section-background, .section-border {
    background: linear-gradient(45deg, #d9570e, #5b7857, #aed4a9, #3396ac, #7d31a8);
    background-size: 2000px 1160px;

    -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 am trying to create an animated gradient which is 2000px wide x 1160px tall much like what appears as an animated GIF on my current homepage which is here: https://ivesgrafik.com/

Thanks Tuanphan! That worked!

Tuanphan (or anyone!) - hoping I can ask you to check some code for me.    I'm admittedly new to CSS but need to understand syntax quickly.  I'm trying to create a block style 90 degree gradient with two colors that will change by section.  I used the tool you recommended to get my section ID.   Nothing has worked.

Thanks in advance.

Here's the code I have:

<style> 
[656cc9719dbd5452e8594052] {
.section-border {opacity:0!important}
.section-background: linear-gradient(90deg, rgba(239,133,53,1) 50%, rgba(237,171,208,1) 50%) !important;}
.section-background{background:transparent !important}

</style>  

On 12/5/2023 at 12:43 AM, MGE said:

Tuanphan (or anyone!) - hoping I can ask you to check some code for me.    I'm admittedly new to CSS but need to understand syntax quickly.  I'm trying to create a block style 90 degree gradient with two colors that will change by section.  I used the tool you recommended to get my section ID.   Nothing has worked.

Thanks in advance.

Here's the code I have:

<style> 
[656cc9719dbd5452e8594052] {
.section-border {opacity:0!important}
.section-background: linear-gradient(90deg, rgba(239,133,53,1) 50%, rgba(237,171,208,1) 50%) !important;}
.section-background{background:transparent !important}

</style>  

Where did you add the code?

If Page Header Code Injection, your code is incorrect

If CSS box, Your code is also invalid, it missed some tags

Can you share link to page where you want to apply this?

Figured it out - thank you!