Jump to content

how to add animated css gradations to my site

Recommended Posts

  • 2 weeks later...

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;
}

 

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 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?

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

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. 

Link to comment

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.

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.