[Support request] Linear-gradient overlay on headers

[Mårten]

Hi,

I am trying to create a linear-gradient with opacity overlay on the header elements. I have tried different methods without success.

This is what i came up with:

.page-hero {
background: rgb(255,255,255);
background: linear-gradient(174deg, rgba(255,255,255,0) 30%, rgba(0,212,255,1) 100%);
}

Can you see what I’m doing wrong?

[David]

Hi there,

try this CSS:

.page-hero, .inside-page-hero {
    position: relative;
}

.page-hero:before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: rgba(255, 255, 255,0);
    background: linear-gradient(174deg, rgba(255, 255, 255, 0) 30%, rgba(0, 212, 255, 1) 100%);
}

[Mårten]

Yes, awesome! Thanks for the help.

[David]

Glad to be of help

[Author]

Posts