[Resolved] Gradient background

[Matthieu]

Hello, do you think that this background is an image or it is possible to recreate the same thing in css ?

How does he manage to appear a little behind on the page?

Thanks

[Leo]

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.

[Matthieu]

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 ?

[Leo]

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/

[Matthieu]

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 :

[Elvin]

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

[Matthieu]

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

Thanks

[Matthieu]

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

[Elvin]

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.

[Matthieu]

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

[Elvin]

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. 😀

[Matthieu]

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 😁

[Matthieu]

– 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

[Elvin]

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.

[Matthieu]

Great thanks a lot !

[Author]

Posts