How can I create a gradient color transition in a header?

[moehajje]

Hey everyone,

is it possible to create a gradient of a color for the header, transitioning from dark at the top to transparent at the bottom?

Could you maybe help ? @PageFly-Kate

Domain Details Page

Thanks in advance

[ZestardTech]

Hello There,

Admin go to online store → themes → actions → edit code
Find Asset >base.css and paste this at the bottom of the file:

.announcement-bar.color-accent-2.gradient {
background-image: linear-gradient(to right, red , yellow);
}

[moehajje]

Thanks for your help Zestard

But I don’t mean with that the Announcement Bar rather the Header

[ZestardTech]

Hello There,

Admin go to online store → themes → actions → edit code
Find Asset >base.css and paste this at the bottom of the file:

sticky-header.header-wrapper.color-accent-1.gradient {
    background-image: linear-gradient(to right, red , yellow);
}

[moehajje]

I think now it should work but I have a question before I apply it

Could we make the gradient from top to bottom ?
And is it maybe possible to mention the colors as a HEX Code #… ?

[ZestardTech]

Hello There,

Admin go to online store → themes → actions → edit code
Find Asset >base.css and paste this at the bottom of the file:

sticky-header.header-wrapper.color-accent-1.gradient {
background: linear-gradient(to bottom, #33ccff 0%, #ff99cc 100%);
}

[GemPages]

Hello @moehajje

It’s GemPages support team and glad to support you today.

I would like to give you a solution to support you.

1. Go to Online Store → Theme → Edit code.

2. Open your theme.liquid theme file.

3. Paste the below code before :

Result:

You should consider using another color, the color you want looks pretty bad.

Hope my solution can work and support you!

Kind & Best regards!

GemPages Support Team.

[moehajje]

@ZestardTech
It works but the problem with it is, that the gradient is in fornt of the logo and options.
It should be as a background

Could we fix it somehow ?