Loading…
1
Just realized people keep putting box-shadow on the inside edge of their CSS art and it makes everything look flat, here's why
I've been messing around with pure CSS landscapes for about 8 months now and I kept wondering why my sunsets and hills looked like cardboard cutouts compared to the stuff people post here. Then it hit me, almost everyone defaults to box-shadow with a positive y-offset which acts like light coming from above, but real light on a rounded shape wraps around the sides. I switched to inset shadows with negative spread on my last few pieces and the difference was night and day, my little desert scene suddenly had depth instead of looking like flat shapes stacked on each other. You can fake a soft sphere with just two inset shadows, one dark at the bottom right and one light at the top left, zero images needed. I know it sounds obvious but I bet half the gradient blobs I see here are fighting the exact same thing. If you've got a favorite trick for making flat CSS shapes look 3D I'd love to steal it.
1 comments
Log in to join the discussion
Log In1 Comment
finleybutler24d ago
Inset shadows don't actually wrap around sides either.
1