Skip to main content


This topic contains 3 replies, has 2 voices, and was last updated by  Connor Smith 5 months, 2 weeks ago.

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

    Connor Smith

    I have a linear gradient as a background colour as part of a header section on a website. However, when viewing on a smaller screen the gradient seems to be different in comparison to viewing it on a larger screen. The larger screen gradient is a lot darker.
    Wondering how I can resolve this.

    Small Screen:

    Larger Screen

    background: linear-gradient(to right , #fe488c, #f99fd0);
    background: -moz-linear-gradient(to right , #fe488c, #f99fd0);
    background: -webkit-linear-gradient(to right , #fe488c, #f99fd0);




    Based on the CSS alone this should not be the case.

    Can you demonstate the issue in


    Connor Smith

    For some reason, no I cannot. It seems to be only on the browser. Tried it with Firefox and Safari and I get the same result as seen in the images above.

    Tried on codepen:

    Any ideas why this is happening?


    Connor Smith

    Apologies! I seem to have resolved the issue. There was an overlay image that was semi-transparent on wide viewports. Apologies for the inconvenience.

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

icon-link icon-logo-star icon-search icon-star