The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Linear Gradient Issue

  • This topic is empty.
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)
  • The forum ‘CSS’ is closed to new topics and replies.