I made a smooth shadows generator(smoothshadows.com) |
I made a smooth shadows generator(smoothshadows.com) |
I've used it a lot, but it always lacked a few features I would've used extensively, such as shareable links, copying to Figma with a button click, ability to change the background color, and a library of ready-made shadows. Also, I think the terminology is perhaps a bit clearer for someone who hasn't looked deeply into how this layering technique works.
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.
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.
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.)
Possibly the multi-layer version is better -- I'd like to see a proper comparison -- but is it better enough to justify the cost?
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.
I have personally long given up on trying to create a perfect shadow in CSS and just use those available online or in libraries like Tailwind CSS. With that, the "Library" part is a great addition.
One thing is the history handling - with every change writing a new URL to the history - it's really inconvenient for the user who, in most cases, just wants to go back to entirely different page. Consider changing that to not affect the history state.
You almost have something like that in the library of different shadows.
Having a couple different heights is something I've used a lot.
``` app.js:450 Uncaught TypeError: Cannot read properties of undefined (reading 'writeText') at Object.onClick [as clickfalse] (app.js:450:29) at HTMLButtonElement.d (preact.min.js:1:4668) onClick @ app.js:450 d @ preact.min.js:1 ```
Small suggestion is to make the box to which the shadow is applied resizable. How we want the shadow to look often depends on the size of the element to which it is applied.
Could be as simple as adding this CSS to the box: resize: both; overflow: auto;
I second the suggestion to display the CSS so you can see what changes as you use the UI.
Looks great!
My only gripe is that it seems to break my back button in Firefox
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
But if you wanted a box to cast a shadow, I think you're better off rendering it in 3D software and then applying it as an image behind your element. Layering a bunch of guassians isn't going to look right either.
I would be interested if CSS ever decided to implement an "extruded" shadow option separate from the existing floating/gaussian one. I'm not sure there's much demand for it though? Not to mention I think it might be much more computationally expensive.