21–30 of 48 posts
This 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.
Do 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.
Looks great!
On chrome on a phone, selecting Linear does not work, and after selecting it, no changes are possible. Looks great!
What is "smooth" referring to? Looks a regular box shadow to me.
What 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.
Possibly the multi-layer version is better -- I'd like to see a proper comparison -- but is it better enough to justify the cost?
One remark, when you copy the css and make a change and copy the css again, it doesnt show the changes in the copied css.