Archived topic
How can I create a header gradient instead of using an image?
5 replies · Started by Caro on August 11, 2021
Hi team,
I'm currently using an image I've created for the header panel but it's causing LCP issues.
This is the website — http://dev.eventologists.co.uk/ — how can I create the same look without using an image?
Best,
Caro
Hi there,
You can use CSS like this:
.site-header {
background: rgb(2,0,36);
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%);
}Adding CSS: https://docs.generatepress.com/article/adding-css/
You can use this site to tweak the gradient to your liking:
https://cssgradient.io/
Ohmygosh!! THANK YOU Leo!!!!!It looks fantastic!! http://dev.eventologists.co.uk/
I would like to achieve the same for the footer area and footer widget area.
As they're two separate areas, how would I create the gradient to make them look like one? As I currently have it looking...
Hi there,
you should be able to change Leos CSS to:
.site-header,
.site-footer {
background: rgb(2,0,36);
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%);
}Then edit the Customizer > Colors > Footer, and change the Footer Widgets and Footer Bar background colors to Transparent.
Hurray!!! It's worked!! Thanks so much!! :)
Glad we could be of help!
