41–48 of 48 posts
You almost have something like that in the library of different shadows.
Having a couple different heights is something I've used a lot.
As mentioned in the sidebar, this tool is inspired by https://shadows.brumm.af/ 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…
Earlier quoted context omitted.
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…
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.
I second the suggestion to display the CSS so you can see what changes as you use the UI.
This is very cool! One suggestion: I would like to be able to see the generated CSS live so I can learn how the effect is actually created and how playing with options modify the output (could not find an option on mobile).
``` 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;