[Resolved] Degrade multiple in a container

Home Forums Support [Resolved] Degrade multiple in a container

Home Forums Support Degrade multiple in a container

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1530311
    Matthieu

    Hello in a previous subject I had asked how to put a multiple gradient in the background of the page with a transition effect from white to degrade it.

    The css provided was this:

    body:before{
    content:”;
    height:100%;
    width:100%;
    animation: bgAnimation 2s linear;
    position:absolute;
    top:0;
    left:0;
    background: linear-gradient(292deg, rgba(248,224,223,1) 2%, rgba(255,255,255,0.9094012605042017) 14%, rgba(186,218,232,1) 24%, rgba(61,207,251,1) 41%, rgba(101,129,237,1) 71%, rgba(164,125,244,0.9150035014005602) 99%);
    z-index:-1;
    }

    @keyframes bgAnimation {
    0%{ opacity:0; }
    100%{ opacity:1; }
    }

    Is it possible to achieve the same effect in a container ?

    Thanks

    #1530862
    David
    Staff
    Customer Support

    Hi there,

    you could try giving your container a CSS class for example: gradient-background

    Then in the code above replace body with .gradient-background
    An the add this additional CSS:

    .gradient-background {
        position: relative;
    }

    Might need some tweaking – which we can help with if you can share a link to a site where you have it set-up

    #1530919
    Matthieu

    Hello, thank you for your answer. I tried to do what you told me, it gives this:

    .gradient-background{
    position: relative;
    content:”;
    height:100%;
    width:100%;
    animation: bgAnimation 2s linear;
    position:absolute;
    top:0;
    left:0;
    background: linear-gradient(292deg, rgba(248,224,223,1) 2%, rgba(255,255,255,0.9094012605042017) 14%, rgba(186,218,232,1) 24%, rgba(61,207,251,1) 41%, rgba(101,129,237,1) 71%, rgba(164,125,244,0.9150035014005602) 99%);
    z-index:-1;
    }

    @keyframes bgAnimation {
    0%{ opacity:0; }
    100%{ opacity:1; }
    }

    But it does not work, here is the link of the page in question:

    #1530953
    David
    Staff
    Customer Support

    Try this CSS:

    .gradient-background {
        position: relative;
    }
    
    .gradient-background:before {  
        content: '';
        height: 100%;
        width: 100%;
        animation: bgAnimation 2s linear;
        position: absolute;
        top: 0;
        left: 0;
        background: linear-gradient(292deg,rgba(248,224,223,1) 2%,rgba(255,255,255,.9094012605042017) 14%,rgba(186,218,232,1) 24%,rgba(61,207,251,1) 41%,rgba(101,129,237,1) 71%,rgba(164,125,244,.9150035014005602) 99%);
        z-index: -1;
    }
    
    @keyframes bgAnimation {
        0%{ opacity:0; }
        100%{ opacity:1; }
    }
    #1530961
    Matthieu

    That’s perfect, thank you so much !

    #1531235
    David
    Staff
    Customer Support
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.