The first time I saw these layered shadows was in AngularJS Material design whiteframes ( https://material.angularjs.org/latest/demo/whiteframe ), which have a few fixed levels of elevation. I always wondered if it would be to generate these shadows continously, and here we go. Great work!
I made a smooth shadows generator
11–20 of 48 posts
Re: I made a smooth shadows generator
#12Earlier quoted context omitted.
The entire Apps state seems to be encoded in the URL, so each change also generates a completely new one. This breaks the state for me, I suppose Firefox doesn't like when you update the URL with every drag of a slider.
Breaking the back button isn’t necessary for this; all they need to do is call `history.replaceState()` instead of `history.pushState()`.
Thank you all for the feedback on this! I agree. It didn't seem like such an issue during development, but that was a misjudgement. Removed that functionality now. Should not add to history anymore (shareable URLs should still work).
Re: I made a smooth shadows generator
#13What is "smooth" referring to? Looks a regular box shadow to me.
Re: I made a smooth shadows generator
#14Adds lots of frames to the back button history… not that bad but very irritating
Sorry about this, was an oversight. Should not do that anymore!
Re: I made a smooth shadows generator
#15This is super cool and I'm definitely bookmarking it for later use :)
I'd suggest moving the "copy css/figma/link" buttons to the right panel or at least making them more obvious (maybe by increasing contrast?) as I had trouble figuring out how to export the shadow I made.
Re: I made a smooth shadows generator
#16What is "smooth" referring to? Looks a regular box shadow to me.
I think adding more shadow layers adds more smoothness.
Re: I made a smooth shadows generator
#17Do note that while modern browsers are pretty performant with this, the more you stack shadows the more your low end users pay for it. I can't recall which large site ran into it a few years ago, but the short gist is they struggled with scroll performance and in the end stacked shadows were to blame.
Re: I made a smooth shadows generator
#18Another similar tool with the same source of inspiration (both are pretty cool):
Re: I made a smooth shadows generator
#19What is "smooth" referring to? Looks a regular box shadow to me.
It is not. Regular box shadows don't have as much depth to them because the shadow colour is static. These "smooth" box shadows create multiple layers of box shadows to give the shadow a gradient of colour from dark (Closest to object) to light (Furthest from object).
Set the opacity high, blur low and then play with the layers and you'll see the multiple box shadows. 0.5 opacity and 10 blur were the settings I used.
Re: I made a smooth shadows generator
#20Is this intended to solve gradient banding?