Archived topic

Linear-gradient overlay on headers

3 replies · Started by Mårten on October 10, 2019

Viewing posts 1–4 of 4

October 10, 2019 at 1:44 am #1030962

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?

October 10, 2019 at 5:39 am #1031099

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

October 10, 2019 at 7:56 am #1031343

Yes, awesome! Thanks for the help.

October 10, 2019 at 8:00 am #1031349

Glad to be of help

This archived topic is closed to new replies.

Start building better websites today.