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?

0 comments

0 Comments

No comments yet

Be the first to share your thoughts on this discussion.