7 ms·
I made a smooth shadows generator
- marttilaine 3y agoAs mentioned in the sidebar, this tool is inspired by https://shadows.brumm.af/ 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 technique works.
- brumm 3y agoHey, I made that! Awesome job on improving it!
- kimmk 3y agoNice generator! I'm not much of an UI or web designer, but I guess this is a common design task in those contexts. Presets for corner roundness are nice, but there could also be a slider for it.
- splatzone 3y agoReally cool, and I can see my designer friends enjoying this. My only gripe is that it seems to break my back button in Firefox
- awesomeMilou 3y agoThe 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.
- JimDabell 3y agoBreaking the back button isn’t necessary for this; all they need to do is call `history.replaceState()` instead of `history.pushState()`.
- marttilaine 3y agoThank 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).
- jimvdv 3y agoThis 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).
- toddmorey 3y agoThat's a great suggestion! And while there are some really nice options (copy as css, copy as Figma layer, permalink...) it took me forever to see them way down in the left corner in the light gray text.
- deleted 3y ago[deleted]
- matt3210 3y agoAdds lots of frames to the back button history… not that bad but very irritating
- marttilaine 3y agoSorry about this, was an oversight. Should not do that anymore!
- arek_nawo 3y agoThis is really nice! Well-designed and can really help with creating box-shadows in CSS (which, on a side-note, is a real pain!). 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.
- jansan 3y agoThe first time I saw these layered shadows was in AngularJS Material design whiteframes ( https://material.angularjs.org/latest/demo/whiteframe 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!
- Kiro 3y agoWhat is "smooth" referring to? Looks a regular box shadow to me.
- kebsup 3y agoI think adding more shadow layers adds more smoothness.
- ZephyrBlu 3y agoIt 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.
- iainmerrick 3y agoYou can get much the same effect with a single layer by setting the blur high (and maybe increasing spread-radius, which this app doesn't have a setting for). Possibly the multi-layer version is better -- I'd like to see a proper comparison -- but is it better enough to justify the cost?
- crazygringo 3y agoThis 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.)
- erikpukinskis 3y agoYeah, 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 https://imgur.com/a/NUXhHrn
- alexghr 3y agoThis 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.
- LordAtlas 3y agoI still couldn't figure out where those buttons are. Kept looking everywhere.
- Etheryte 3y agoDo 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.
- Waterluvian 3y agoOn this note, is there a way to do CSS profiling other than bisecting it all? Like some way to get the rendering times for each CSS rule or for each element and children?
- tuzemec 3y agoAnother similar tool with the same source of inspiration (both are pretty cool): https://www.joshwcomeau.com/shadow-palette/ https://www.joshwcomeau.com/shadow-palette/
- samstave 3y agoI like the light source mechanic on that site a lot.
- luke-stanley 3y agoIs this intended to solve gradient banding?
- karolist 3y agoIsn't gradient banding a result of 8bit color depth?
- aviperl 3y agoOn chrome on a phone, selecting Linear does not work, and after selecting it, no changes are possible. Looks great!
- marttilaine 3y agoThanks for reporting! Fixed.
- pixelpoet 3y agoBrilliant old article on this from Michael Herf (the guy behind Picasa and f.lux) 2001: http://stereopsis.com/shadowrect/ http://stereopsis.com/shadowrect/
- GrumpyNl 3y agoOne remark, when you copy the css and make a change and copy the css again, it doesnt show the changes in the copied css.
- marttilaine 3y agoHmm. Not able to reproduce this issue. Do you see the clipboard icon turning to checkmark on the second copy too? If not, then the browser blocked the second clipboard operation.
- Gordonjcp 3y agoTurning the blur down, changing the shadow to a nice bright colour, turning up the number of layered shadows, and then wibbling the X and Y parameters around gives a nice oldschool Winamp Milkdrop plugin rotozoomer type effect.
- naillo 3y agoFeels like we're back to 2012 again
- graypegg 3y agoI welcome back a little skeuomorphic flair to web design personally! More buttons that look pushable please!
- samstave 3y agoI dont personally have a use for this - but I still find it quite awesome!
- karaterobot 3y agoJust 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.
- nielsbot 3y agoI think the title should mention this is a CSS smooth shadows generator. I assumed it was more general purpose before I clicked through.
- naet 3y agoIt could be cool to add a feature around different "heights" like this one: https://www.joshwcomeau.com/shadow-palette/ https://www.joshwcomeau.com/shadow-palette/ You almost have something like that in the library of different shadows. Having a couple different heights is something I've used a lot.
- riddley 3y agoThis is very cool. On Linux + Firefox (102.12.0esr) I'm seeing "navigator.clipboard is undefined" on line 450 when clicking Copy To Clipboard. I second the suggestion to display the CSS so you can see what changes as you use the UI.
- Nars088 3y agoCan play with the layered shadows all day!
- FrostKiwi 3y agoCool site. None of the copy buttons work though on both Firefox and Chrome: ``` 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 ```
- hlammers 3y agoThose shadows are smooth indeed, very cool project! 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;