4
That gradient trick I used for a hero section broke the whole page on mobile
I was building a landing page for a small bakery in Austin last month, and I thought I was being clever using a conic gradient to make this fancy background effect. It looked perfect on my 27-inch monitor, really smooth and colorful. But when I checked it on my phone, the gradient just turned into a solid brown mess and the text was completely unreadable. Turns out some older browsers don't support conic gradients at all, and even modern ones render them weird on smaller screens. I had to scrap the whole thing and switch to a simpler layered background with box shadows and a subtle linear gradient. It actually looked better in the end, cleaner and more consistent. Has anyone else had a CSS trick backfire like that when the viewport changed?
2 comments
Log in to join the discussion
Log In2 Comments
faithrodriguez1d ago
Think about how the gradient interacts with your site's color scheme in different lighting conditions too. I had a nice dark blue to purple gradient on my portfolio that showed banding on mobile screens when viewed outside in sunlight. Ended up using a CSS gradient mesh with more color stops to smooth out the transitions.
4