Gradient background

Hi there,

You could try using CSS to apply a gradient to the body background color like this:

body {
    background: rgb(2,0,36);
    background: linear-gradient(180deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 39%, rgba(0,212,255,1) 100%);
}

Then just make sure all other elements are transparent in the customizer.

Thanks for your rely, but i have the impression that the gradient goes in several directions and not in just one using linear-gradient, no ?

You will need to find the desired gradient - my code is just showing you how to apply a gradient.

Maybe a site like this would help:
https://cssgradient.io/

Thank you very much for this site. Is there a possibility to have gradients in different orientation for the same background?

Last little question: How do I make the page appear white for a few seconds at the start and then the gradient background is applied smoothly? As in the example :

Hi,

This is a bit tricky but is certainly doable.

You must remove the current background gradient CSS and replace it with this code:

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

The effect works it's perfect but it takes only part of the page, how could I modify that ?

Thanks

If the gradient can be the same size and go down like here it would be perfect

The effect works it’s perfect but it takes only part of the page, how could I modify that ?

Within the code, can you try changing position:absolute; to position:fixed;?

Let us know how it goes.

How do you know all this ? ahah 😅 That's perfect, thank you very much !

How do you know all this ? ahah 😅 That’s perfect, thank you very much !

It comes with CSS experience and knowledge in using Chrome Devtools. :)

No problem. Glad it works for you. :D

Small question that I do not know where to ask. With your knowledge of using Chrome Devtools, how would you optimize my performance metrics in https://web.dev/measure/?

Thanks 😁

- High - Performance - Eliminate render-blocking resources

How to Eliminate Render Blocking Resources for exemple ?

- High performance Initial server response time was short

How to fix this problem too ?

Thank you so much

You can refer to Tom's advice here:
https://generatepress.com/forums/topic/google-pagespeed-insights-results/#post-1363619

The link he provided in his reply is quite insightful. It also mentioned about installing AutOptimize plugin that can help you w/ this issue.

Great thanks a lot !