[Resolved] Degrade multiple in a container

[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

[David]

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

[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:

[David]

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

[Matthieu]

That’s perfect, thank you so much !

[David]

Glad to be of help.

[Author]

Posts