how to add animated css gradations to my site

How do I add animated css gradations rectangular shape to my blank page homepage?

Thank you.

I would like to create an animated gradations rectangular shape with a white text overlay 2000px wide x 1200px tall. Please see attached example.

Thank you.

What is your homepage url?

https://ivesgrafik.com

I would like to build the rectangular shape on a "blank page" homepage.

Thank you for your help.

How can I add an animated gradation to my homepage approximately 2000px wide x 1000px tall?

https://ivesgrafik.com/

Currently, I'm using an animated GIF.

Add to Website > Website Tools (under Not Linked) > Custom CSS

/* Site Gradient */
.section, .section-background, .section-border {
    background-color: transparent !important;
}

body {
    background: rgb(1,114,84) !important;
    background: linear-gradient(99deg, rgba(1,114,84,1) 0%, rgba(179,104,124,1) 88%, rgba(203,103,127,1) 100%) !important;
}

Thanks for your help with this. It worked, but how can I animate it and confine the animated gradation to a 2000px x 1500px rectangle with a white text overlay?

On 11/19/2023 at 1:54 PM, BradleyK said:

Thanks for your help with this. It worked, but how can I animate it and confine the animated gradation to a 2000px x 1500px rectangle with a white text overlay?

Do you know an example? I can image it easier

With text, you mean the text will be always fixed on middle of screen or?

Hi tuanphan,

The example would be the animated GIF at the top of the page that reads: "Crafting brands that resonate and inspire" — I would like this text as it appears, centered over the animated gradation background which is approximately 2000px x 1500px.

Here is my homepage with the animated GIF gradation I would like to convert to a CSS animated gradation background: https://ivesgrafik.com/

Thank you for your help. 

Hello tuanphan,

I found this code to have an effective animated gradation; however, the gradation appears in every section of my homepage, https://ivesgrafik.com

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

    -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'd like to confine the above code to one top section of the homepage, and confine the dimensions of the animated gradation to 2000px wide x 1500px tall, with the ability to add text on top of the animated gradation.

Thanks.