6
Tried CSS box-shadows for clouds vs actual gradient layers and the gradients won by a landslide
Spent an afternoon recreating a skyline with box-shadows for fluffy clouds, then redid it with layered radial gradients and the gradients looked way softer and took half the code to run - has anyone else found a hidden trick for clouds that beats both?
3 comments
Log in to join the discussion
Log In3 Comments
the_leo1mo ago
My buddy Marco spent like 3 hours trying to do clouds with box-shadows for a portfolio site. He ended up with 15 different box-shadow values stacked on one div. Browser kept freezing when he tested it on his old laptop. Gradients did the same thing in 10 minutes and looked way smoother.
5
emmar751mo ago
oh man gradients are great but have you tried using CSS filters with drop-shadow on pseudo elements? like layer a few of those and you get this dreamy soft effect without all the math. i did this last week for a sunset scene and it looked like a painting.
3
ray2101mo ago
23 layers of box-shadow later I finally threw in the towel and switched to gradients. That drop-shadow trick with pseudo elements sounds dangerous, I did something similar last week for a foggy bridge scene and ended up with 8 pseudo elements stacked on each other. It gave this nice hazy look but my browser started chugging loading the page, so gradients still felt cleaner in the end. The softness you get from gradients is hard to beat though, especially for clouds that need to blend into a sky.
0