Feels like we're back to 2012 again
I made a smooth shadows generator
31–40 of 48 posts
Re: I made a smooth shadows generator
#32I dont personally have a use for this - but I still find it quite awesome!
Re: I made a smooth shadows generator
#33Another similar tool with the same source of inspiration (both are pretty cool): https://www.joshwcomeau.com/shadow-palette/
I like the light source mechanic on that site a lot.
Re: I made a smooth shadows generator
#34Is this intended to solve gradient banding?
Isn't gradient banding a result of 8bit color depth?
Re: I made a smooth shadows generator
#35Feels like we're back to 2012 again
I welcome back a little skeuomorphic flair to web design personally! More buttons that look pushable please!
Re: I made a smooth shadows generator
#36What 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.
This doesn't make any sense to me. Shadow color should be static; shadows don't change color.
And remember that, practically, when you sum up multiple overlapping gaussians you still just get a single gaussian in the end.
So multiple "layers" of shadows seems to be entirely redundant and simply a waste of computing power.
(Unless you want 2+ shadows because you're trying to simulate the effect of 2+ directional spotlights with hard edges, but I've never seen anybody ever want to do that in a UX context. Modern UX shadows are almost universally simulating a single softbox light from slightly above.)
Re: I made a smooth shadows generator
#37What 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.
It feels that this merely emulates motion blur in the direction of the shadow. Is layering the only way to go about this?
Re: I made a smooth shadows generator
#38Earlier quoted context omitted.
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.
This doesn't make any sense to me. Shadow color should be static; shadows don't change color. And remember that, practically, when you sum up multiple overlapping gaussians you still just get a single gaussian in the end. So multiple "layers" of shadows seems to be entirely redundant and simply a waste of computing power. (Unless you want 2+ shadows because you're trying to simulate the effect of 2+ directional spotl…
Yeah, you’re right that it doesn’t make sense if you think of the rectangle as a flat thing hovering above the background like a piece of paper.
But I think the intention is to simulate the rectangle being the top surface of a 3D box. If you shine a light at a cube on a desk, the shadows are very sharp right where the cube touches the desk, and then further away are softer.
I think that’s the effect they’re trying to achieve here?
So it’s not changing the gaussian for falloff, it’s changing the shape of the shadow, from a rectangle to a rhombus, and using different gaussians along the edges.
Here’s what it’s doing with the settings tweaked to make it more visible: https://imgur.com/a/NUXhHrn
Re: I made a smooth shadows generator
#39Just wanted to say that the "copy Figma layer" option is a really neat touch.
If it were me, I'd make all those copy buttons more prominent: at first I didn't see them, and assumed I was expected to inspect the page using developer tools to grab the CSS values.
Re: I made a smooth shadows generator
#40I think the title should mention this is a CSS smooth shadows generator. I assumed it was more general purpose before I clicked through.