I made a smooth shadows generator
smoothshadows.com
I made a smooth shadows generator
1–10 of 48 posts
Re: I made a smooth shadows generator
#2As 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 technique works.
Re: I made a smooth shadows generator
#3Nice 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.
Re: I made a smooth shadows generator
#4Really cool, and I can see my designer friends enjoying this.
My only gripe is that it seems to break my back button in Firefox
Re: I made a smooth shadows generator
#5This 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).
Re: I made a smooth shadows generator
#6[deleted]
Re: I made a smooth shadows generator
#7Really cool, and I can see my designer friends enjoying this. My only gripe is that it seems to break my back button in Firefox
The 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.
Re: I made a smooth shadows generator
#8Adds lots of frames to the back button history… not that bad but very irritating
Re: I made a smooth shadows generator
#9Really cool, and I can see my designer friends enjoying this. My only gripe is that it seems to break my back button in Firefox
The 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.
Breaking the back button isn’t necessary for this; all they need to do is call `history.replaceState()` instead of `history.pushState()`.
Re: I made a smooth shadows generator
#10This 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.