Archived topic

Degrade multiple in a container

5 replies · Started by Matthieu on November 13, 2020

Viewing posts 1–6 of 6

November 13, 2020 at 12:28 pm #1530311

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

November 14, 2020 at 4:53 am #1530862

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

November 14, 2020 at 5:56 am #1530919

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:

November 14, 2020 at 6:32 am #1530953

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

November 14, 2020 at 6:38 am #1530961

That's perfect, thank you so much !

November 14, 2020 at 8:06 am #1531235

Glad to be of help.

This archived topic is closed to new replies.

Start building better websites today.