0

I am trying to make the background a gradient color. But when I do that It comes out all weird with a bunch of lines... it doesn't look right. However, when it doesn't take up the whole background say, width:500px and height: 500px, it looks fine. I don't really understand what's happening here.

body {
  background-image: linear-gradient(red, 10%, pink);
}
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
Dezque
  • 53
  • 7
  • How big is your body? What's inside. Please provide an [MCVE]. – Kaiido Jun 21 '19 at 01:50
  • @Kaiido the code he gave is already an MCVE – Temani Afif Jun 21 '19 at 08:23
  • @TemaniAfif How can you be so sure their document is empty? – Kaiido Jun 21 '19 at 08:32
  • @Kaiido I concluded this from his description. He's probably adding the background before adding any content and faced this issue. Then he said that it looks fine when there is some width/height and he's suprised why. I can be wrong but I am pretty sure it's the case. – Temani Afif Jun 21 '19 at 08:37
  • That's also obviously what I thought when reading this question, but as you said "[we] can be wrong" hence my comment asking exactly for more information about this point. – Kaiido Jun 21 '19 at 08:38
  • @Kaiido well, in all the cases I think the duplicate perfectly answer the question as it is now. If the OP add more details we can then see if it's a different situation. – Temani Afif Jun 21 '19 at 08:53
  • Yes I don't object the closure, but I still think my first comment is necessary. – Kaiido Jun 21 '19 at 08:55

1 Answers1

1

It’s most likely “color banding” which is a problem with monitors that don’t support tons of colors such that it can create a perfect gradient. It might look fine on a properly calibrated monitor.

Linear gradients are also not as good as gradients based on a bezier curve to using “easing” to make a more smooth blend between colors.

Example of a linear gradient with more points that have an easing curve:

linear-gradient(
  hsl(0, 0%, 0%) 0%,
  hsla(0, 0%, 0%, 0.738) 19%,
  hsla(0, 0%, 0%, 0.541) 34%,
  hsla(0, 0%, 0%, 0.382) 47%,
  hsla(0, 0%, 0%, 0.278) 56.5%,
  hsla(0, 0%, 0%, 0.194) 65%,
  hsla(0, 0%, 0%, 0.126) 73%,
  hsla(0, 0%, 0%, 0.075) 80.2%,
  hsla(0, 0%, 0%, 0.042) 86.1%,
  hsla(0, 0%, 0%, 0.021) 91%,
  hsla(0, 0%, 0%, 0.008) 95.2%,
  hsla(0, 0%, 0%, 0.002) 98.2%,
  hsla(0, 0%, 0%, 0) 100%
);
jeffjenx
  • 17,041
  • 6
  • 57
  • 99
  • this isn't the issue the OP is facing – Temani Afif Jun 21 '19 at 08:23
  • Okay @TemaniAfif. I've encountered such a problem myself and that is how I interpreted the OP's question. I'll leave this answer up in case anyone else in the future experiences a similar issue an stumbles on this Q&A. It's especially prevalent when going from a color like red to pink which there aren't that many shades/hues for a large gradient to appear smooth. – jeffjenx Jun 21 '19 at 11:51