Loading…
13
My radial gradient sunset turned into a tie-dye mess, need help
Spent last night trying to make a simple sunset for a CSS art piece, layered like 6 radial gradients with different stop positions. On my monitor it looked smooth and dreamy, but when I opened it on my phone the colors banded hard and it looked like a 90s tie-dye shirt. Made the mistake of not testing in multiple browsers first, Chrome was fine but Firefox showed crazy orange stripes every 8 pixels. I traced it back to using 0.5% increments in my color stops, which causes interpolation issues. Swapped to more spaced out stops with a mix-blend-mode trick and it cleared up. Has anyone else hit that banding wall with smooth gradient transitions, and what's your go-to fix for cross-browser consistency?
1 comments
Log in to join the discussion
Log In1 Comment
jade61829d ago
0.5% increments is exactly what you want though. Your banding came from Chrome and Firefox rounding differently at low alpha, not from tight stops. Spaced out stops make bigger jumps so you traded banding for visible steps. The real fix is dithering: add a tiny repeating-linear-gradient or a noise PNG at like 2% opacity over the whole thing. Tons of banding complaints on retina phones trace back to 8-bit color, not browser bugs. Your blend mode trick is probably just hiding the seams with soft light, which will bite you on Safari.
3