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?
No description
58 Replies
glutonium
glutonium9mo ago
what u r encountering is i believe know as "banding" problem try searching how to get rid of css gradient banding on your browser
RMON
RMON9mo ago
Will do thank you! I tried figuring out a fix for it with no luck, do you have any other recommendations?
somrigostsås 🧀
If you try out another color space, like oklch, I think you'll be better off.
MarkBoots
MarkBoots9mo ago
what is the gradient you are using
ἔρως
ἔρως9mo ago
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
MarkBoots
MarkBoots9mo ago
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)
ἔρως
ἔρως9mo ago
in an sdr display, it will still cause banding
MarkBoots
MarkBoots9mo ago
yea, but getting opacity out of the equation should make it a lot better
ἔρως
ἔρως9mo ago
probably, yes, should eliminate some of the hard edges on it
RMON
RMON9mo ago
Thank you so much everyone for the help I'll get to fixing the issue and using your recommendations.
RMON
RMON9mo ago
Mark, Thank you so much I implemented your solution and it turned out great.
No description
ἔρως
ἔρως9mo ago
it looks nearly perfect it will never look perfect because there arent enough colors, but that looks really good
RMON
RMON9mo ago
It's better then nothing honestly
ἔρως
ἔρως9mo ago
it is a lot better as i said, it looks nearly perfect
RMON
RMON9mo ago
Do you have any recommendations to help make it perfect?
ἔρως
ἔρως9mo ago
it's impossible
RMON
RMON9mo ago
Dang.
ἔρως
ἔρως9mo ago
like, really impossible
RMON
RMON9mo ago
How come though?
ἔρως
ἔρως9mo ago
well, what's the resolution of your screen?
RMON
RMON9mo ago
Wait let me check I think its the basic 1920 x 1080
ἔρως
ἔρως9mo ago
so, 1920 wide to make it perfect, you need 1 color in each pixel
RMON
RMON9mo ago
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.
ἔρως
ἔρως9mo ago
now, which values can you put in rgb()?
RMON
RMON9mo ago
As in the values I used?
ἔρως
ἔρως9mo ago
as in, the valid values
RMON
RMON9mo ago
oh isn't it just 255 (R) 255 (G) and 255 (B) then an alpha?
ἔρως
ἔρως9mo ago
yes, it is so, you can put 255 per color
RMON
RMON9mo ago
ohhh
ἔρως
ἔρως9mo ago
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?
RMON
RMON9mo ago
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
ἔρως
ἔρως9mo ago
you repeat colors all you can do is repeat the colors, for as many pixels as needed
RMON
RMON9mo ago
But how would you do repetitions of the color?
ἔρως
ἔρως9mo ago
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
RMON
RMON9mo ago
Oh I see so it really is impossible to achieve a smooth gradient unless you have a tiny display.
ἔρως
ἔρως9mo ago
on any display
RMON
RMON9mo ago
Oh wow, I thought the gradient would be smoother on a smaller display?
ἔρως
ἔρως9mo ago
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
RMON
RMON9mo ago
oh I getchu
ἔρως
ἔρως9mo ago
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
RMON
RMON9mo ago
dang.. you really cant escape it can you
ἔρως
ἔρως9mo ago
and darker colors hide it better no, you can't
ἔρως
ἔρως9mo ago
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/...
RMON
RMON9mo ago
Quick quesiton, on my header I added position sticky but it hasn't worked how come?
ἔρως
ἔρως9mo ago
start a new question
RMON
RMON9mo ago
👍
ἔρως
ἔρως9mo ago
kevin did made a video about it
RMON
RMON9mo ago
Alright, I'll check it out. Thank you!
ἔρως
ἔρως9mo ago
you're welcome
RMON
RMON9mo ago
Ok I figured it out lol - I was using the "sticky" instead of "fixed" in the wrong area.
ἔρως
ἔρως9mo ago
that's fine, those mistakes happen also, you don't have to ping me on every message
RMON
RMON9mo ago
My bad I honestly forget discord sends out pings on replies
ἔρως
ἔρως9mo ago
it does, and it gets old really quickly you can tell it not to ping, but, it's just us here
RMON
RMON9mo ago
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
ἔρως
ἔρως9mo ago
its fine, dont worry
somrigostsås 🧀
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.
ἔρως
ἔρως9mo ago
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
Want results from more Discord servers?
Add your server