How can I change all my webpage headers to gradient?

Store Design
1

Hi,

Can anyone help me change all the headers of my pages to gradient? Just like the one on the front page.

I’d like to change, “Our Services”, “About Us”, “Our Clients”, and “Contact Us” to gradient.

https://www.fillgapagency.com

Password: pahglo

From this header
From this header2162×1540 346 KB

To gradient like this
To gradient like this818×254 44.7 KB

1 Like
2

@fillgap , do this to fix it in 20 seconds:

  1. In your Shopify Admin go to: online store > themes > actions > edit code
  2. Find Asset > base**.css** and paste this at the bottom of the file:
.list-menu li > * > *{
    background: -webkit-linear-gradient(-300deg,rgba(249,208,163,1),rgba(240,110,105,1) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.header__menu-item:hover:after ,
.header__active-menu-item:after{
      content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 12px;
    height: 1px;
    width: calc(100% - 24px);
    background: rgb(var(--color-foreground));
    margin: 0 auto;
    display: block;
}

.header__menu-item{
    position: relative;
}

If it helps you please click on the “like” button and mark this answer as a solution!

Thank you.

Kind regards,
Diego

3

Hi @diego_ezfy ,

Sorry but I don’t mean the navigation menu. I mean all the headers of the pages. Like the “Our Services” text BELOW the navigation bar.

Thanks!

4

@fillgap

You can follow the aforementioned steps and use the following code instead:

.page-title{
    background: -webkit-linear-gradient(-300deg,rgba(249,208,163,1),rgba(240,110,105,1) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
1 Like
5

@fillgap

can you try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/base.css ->paste below code at the bottom of the file.
h1.main-page-title.page-title {
 background: -webkit-linear-gradient(-300deg, rgba(249, 208, 163, 1), rgba(240, 110, 105, 1) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
1 Like
6

Hi @diego_ezfy ,

This worked perfectly! Thank you.

Would you also happen to know how to make the “YOUR IN HOUSE MARKETING OUTSOURCED” text in the About Page to gradient?

And the Contact Page “SEND” button to gradient as well.

1 Like
7

@fillgap

yes, please add this code also

.rich-text__blocks h2.h1 {
    background: -webkit-linear-gradient(-300deg,rgba(249,208,163,1),rgba(240,110,105,1) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
button.button[type="submit"] {
    background-image: -webkit-linear-gradient(-300deg,rgba(249,208,163,1),rgba(240,110,105,1) 100%);
}