Gradient isn't smooth
So if you look at the picture I've sent you can notice the gradient having lines throughout it isn't a smooth transition how can I fix this?
58 Replies
what u r encountering is i believe know as "banding" problem
try searching how to get rid of css gradient banding on your browser
Will do thank you!
I tried figuring out a fix for it with no luck, do you have any other recommendations?
If you try out another color space, like oklch, I think you'll be better off.
what is the gradient you are using
you will never get rid of the banding
in sdr, there are 256 shades of red, green and blue
in a 1920 wide display, you can see how you need to stretch those colors
what you can try is to have as many colors as possible between the 2 colors of the gradient, and maybe even play with transparency
yea, the transparency is causing it.
you could try to just omit that.
this will (almost) look the same in colors
hsl(222 92% 5%), hsl(0 0% 12%)
(Used a colorpicker, maybe needs some finetuning)in an sdr display, it will still cause banding
yea, but getting opacity out of the equation should make it a lot better
probably, yes, should eliminate some of the hard edges on it
Thank you so much everyone for the help I'll get to fixing the issue and using your recommendations.
Mark, Thank you so much I implemented your solution and it turned out great.
it looks nearly perfect
it will never look perfect because there arent enough colors, but that looks really good
It's better then nothing honestly
it is a lot better
as i said, it looks nearly perfect
Do you have any recommendations to help make it perfect?
it's impossible
Dang.
like, really impossible
How come though?
well, what's the resolution of your screen?
Wait let me check
I think its the basic 1920 x 1080
so, 1920 wide
to make it perfect, you need 1 color in each pixel
yea, it's 1920 x 1080 - I just had to make sure since I was messing with the res recently
Could you elaborate? I dont really understand.
now, which values can you put in rgb()?
As in the values I used?
as in, the valid values
oh
isn't it just 255 (R) 255 (G) and 255 (B) then an alpha?
yes, it is
so, you can put 255 per color
ohhh
imagine you want a smooth green gradient that's on the background of the screen
you have a total of 256 different values for the green color (the
g in rgb)
but you have 1920 pixels to color
what do you do?Im not sure doesnt seem like you can do much
ig you'd make it just stretch out to where ever you'd need it to go
you repeat colors
all you can do is repeat the colors, for as many pixels as needed
But how would you do repetitions of the color?
and that's what makes the banding - the weird effect you see on the background
well, for a few pixels, the gradient repeats the same rgb values
Oh I see
so it really is impossible to achieve a smooth gradient unless you have a tiny display.
on any display
Oh wow, I thought the gradient would be smoother on a smaller display?
for your display, a 1920x1080 resolution and a smooth green gradient, you need to repeat the green value every 1920/256 = 7.5 pixels
so, you will see weird bands of the same green that are 7-8 pixels wide
oh I getchu
a small screen can make it harder to notice, but it will still be noticeable
and when you mix opacity, stuff gets very hairy
so, what you do is to try to get 2 colors that have as many different values between them
dang.. you really cant escape it can you
and darker colors hide it better
no, you can't
https://www.youtube.com/watch?v=h9j89L8eQQk <-- this video explains this really well
Tom Scott
YouTube
Why dark video is a terrible mess
Dark scenes in television, YouTube, and streaming platforms all look pixelated and blocky. Here's why.
Animation by William Marler: https://wmad.co.uk
🟥 MORE FROM TOM: https://www.tomscott.com/
(you can find contact details and social links there too)
📰 WEEKLY NEWSLETTER with good stuff from the rest of the internet: https://www.tomscott.com/...
Quick quesiton, on my header I added position sticky but it hasn't worked how come?
start a new question
👍
kevin did made a video about it
Alright, I'll check it out. Thank you!
you're welcome
Ok I figured it out lol - I was using the "sticky" instead of "fixed" in the wrong area.
that's fine, those mistakes happen
also, you don't have to ping me on every message
My bad I honestly forget discord sends out pings on replies
it does, and it gets old really quickly
you can tell it not to ping, but, it's just us here
Yea, My bad I rarely reply to people as in most cases they're still there to see the message it self so I forget it has a ping function
its fine, dont worry
Modern displays that supports encoding of more colors (P3, Rec. 2020, etc) could potentially benefit from using OKLCH, since that can be used for wide-gamut P3 colors. That would (potentially) reduce banding.
oklch does sound really interesting
but interestingly enough, the hsl example looks extremely close to perfect on my non-licensed hdr display
and looks damn good, nearly perfect, on my sdr display