[HN Gopher] I made a smooth shadows generator
___________________________________________________________________
I made a smooth shadows generator
Author : marttilaine
Score : 210 points
Date : 2023-06-20 09:38 UTC (13 hours ago)
(HTM) web link (smoothshadows.com)
(TXT) w3m dump (smoothshadows.com)
| luke-stanley wrote:
| Is this intended to solve gradient banding?
| karolist wrote:
| Isn't gradient banding a result of 8bit color depth?
| Kiro wrote:
| What is "smooth" referring to? Looks a regular box shadow to me.
| kebsup wrote:
| I think adding more shadow layers adds more smoothness.
| jprd wrote:
| Sade
| ZephyrBlu wrote:
| 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.
| planede wrote:
| It feels that this merely emulates motion blur in the
| direction of the shadow. Is layering the only way to go about
| this?
| crazygringo wrote:
| 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.)
| erikpukinskis wrote:
| 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
| crazygringo wrote:
| Oh, interesting. I never thought of it that way. I think
| UX shadows are pretty universally meant to indicate the
| effect of floating cards rather than solid boxes (or
| "extruded").
|
| 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.
| iainmerrick wrote:
| You 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?
| alexghr wrote:
| This 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 wrote:
| I still couldn't figure out where those buttons are. Kept
| looking everywhere.
| karaterobot wrote:
| Just 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.
| samstave wrote:
| I dont personally have a use for this - but I still find it quite
| awesome!
| marttilaine wrote:
| 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 technique works.
| brumm wrote:
| Hey, I made that! Awesome job on improving it!
| GrumpyNl wrote:
| One 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 wrote:
| Hmm. 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.
| aviperl wrote:
| On chrome on a phone, selecting Linear does not work, and after
| selecting it, no changes are possible.
|
| Looks great!
| marttilaine wrote:
| Thanks for reporting! Fixed.
| nielsbot wrote:
| I think the title should mention this is a _CSS_ smooth shadows
| generator. I assumed it was more general purpose before I clicked
| through.
| Etheryte wrote:
| Do 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 wrote:
| On 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?
| splatzone wrote:
| Really cool, and I can see my designer friends enjoying this.
|
| My only gripe is that it seems to break my back button in Firefox
| jimkoen wrote:
| 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.
| JimDabell wrote:
| Breaking the back button isn't necessary for this; all they
| need to do is call `history.replaceState()` instead of
| `history.pushState()`.
| marttilaine wrote:
| Thank 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 wrote:
| 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).
| toddmorey wrote:
| That'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]
| matt3210 wrote:
| Adds lots of frames to the back button history... not that bad
| but very irritating
| marttilaine wrote:
| Sorry about this, was an oversight. Should not do that anymore!
| Gordonjcp wrote:
| Turning 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.
| Nars088 wrote:
| Can play with the layered shadows all day!
| naillo wrote:
| Feels like we're back to 2012 again
| graypegg wrote:
| I welcome back a little skeuomorphic flair to web design
| personally! More buttons that look pushable please!
| naet wrote:
| It could be cool to add a feature around different "heights" like
| this one: 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.
| kimmk wrote:
| Nice 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.
| arek_nawo wrote:
| This 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.
| tuzemec wrote:
| Another similar tool with the same source of inspiration (both
| are pretty cool):
|
| https://www.joshwcomeau.com/shadow-palette/
| samstave wrote:
| I like the light source mechanic on that site a lot.
| pixelpoet wrote:
| Brilliant old article on this from Michael Herf (the guy behind
| Picasa and f.lux) 2001: http://stereopsis.com/shadowrect/
| jansan wrote:
| The first time I saw these layered shadows was in AngularJS
| Material design whiteframes (
| 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!
| riddley wrote:
| This 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.
___________________________________________________________________
(page generated 2023-06-20 23:02 UTC)