Linear Gradient Issue

[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:
https://i.stack.imgur.com/FkS6T.png

Larger Screen

https://i.stack.imgur.com/TPEGt.png

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

Thanks!

[Paulie_D]

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

Can you demonstate the issue in Codepen.io.

[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: https://codepen.io/smith8867/pen/zyagmK

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.

[Author]

Posts