4 ms·
Shadow Palette Generator
- londons_explore 5y agoShadows are computationally expensive to generate. First the object has to be rendered to a buffer, and then the buffer blurred, and then the blurred buffer, object and background composited together. Having many shadows on an object makes this path much longer. I can imagine adding this to a page could easily run out of GPU RAM and end up having to discard buffers which later need to be re-rendered. End result:. Hot slow phone. I'd like to at least see a benchmark of this effect before suggesting multiple box shadows.
- jonwinstanley 5y agoI agree that a benchmark on CPU/GPU would be helpful for this effect. However, I doubt you'd end up running out of ram through using this technique unless it was added to a large number of elements.
- MrLeap 5y agoMakes me wish the css filter feature hadn't fizzled. Would be much more performant to do this in a single pass by giving a gradient to a box distance formula in a shader!
- user-the-name 5y agoThat will not generate a visually pleasing shadow, though.
- extropy 5y agoBecause? You could specify any formula you want. Including lookup tables. If you can describe it, the shader can render it.
- user-the-name 5y agoBecause a visually pleasing shadow does not follow a box distance function at all.
- tobr 5y agoThat’s not how CSS box shadows are generated. They only need to take into account the dimensions of the rectangle and the corner radius, which opens up for a lot of optimization.
- londons_explore 5y agoTake a look at the layer tree in the overflow menu in the chrome devtools. You can see which shadows had to be rendered to a buffer and which did not. I suspect the complexity is that some objects can be transparent, and then their shadows get complex.
- tobr 5y agoIf you have an example of how transparency makes the shadow more complex, please give it. I’m fairly confident there are no cases like that. Transparency in the background image or border doesn’t change the shape of the box the shadow applies to, and things like opacity affects the shadow too. The example you had in your first comment is also wrong, as shadows don’t apply to other shadows. There might still be cases where a particular optimization doesn’t work and the browser falls back to a buffer.
- foxbee 5y agoThis is brilliant and will make design a tiny bit easier. The creator is continually producing helpful, and really cool resources to make development easier. Smashing work.
- deleted 5y ago[deleted]
- deleted 5y ago[deleted]
- louissan 5y agoGPU/CPU battery consumption says "hi" but yes it looks nice :-)
- batperson 5y agoWould it really affect battery consumption in any meaningful way ?
- louissan 5y agoprobably though not massively if it's the odd site; very likely if it'a all sites. Not massively if it's the odd element in a page, very likely if it's all elements in the page. But perhaps more importantly the smoothness of the UI on scroll might be negatively impacted - and there is a lot of up and down scrolling in the mobile world, isn't there? in other words, not everyone has an iphone 13 or other android-based extremely high-end mobile device at their disposal.
- anentropic 5y agoIt feels like web browsers should just implement some kind of alternate blend mode that provides more color-saturated shadows
- tiepoul 5y agoThis is definitely helpful in creating various artistic designs, especially in incorporating shadows.
- JabavuAdams 5y agoThat "Hi there! Can I share a cool thing I'm working on with you?" avatar at the bottom of the page is cute! I usually hate pop-ups or chat bots. Nice! Maybe part of it is that it doesn't obscure what I'm trying to read, and it only appears at the end.
- spoils19 5y agoModern web development has gone off the rails. Old-school website design was far superior, where we just used the styling provided for us and a trickle of CSS for some simple layout and colors. It's absurd that box-shadow even exists, let alone have a generator for it.