[Support request] Linear-gradient overlay on headers

Home Forums Support Linear-gradient overlay on headers

This topic contains 3 replies, has 2 voices, and was last updated by  David 5 days, 9 hours ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1030962

    Entos

    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?

    #1031099

    David Customer Support

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

    Entos

    Yes, awesome! Thanks for the help.

    #1031349

    David Customer Support
Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.