I made a smooth shadows generator

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).

As mentioned in the sidebar, this tool is inspired by <a href="https:&#x2F;&#x2F;shadows.brumm.af&#x2F;" rel="nofollow noreferrer">https:&#x2F;&#x2F;shadows.brumm.af&#x2F;</a><p>I&#x27;ve used it a lot, but it always lacked a few features I would&#x27;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&#x27;t looked deeply into how this layering technique works.

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&#x27;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.

Another similar tool with the same source of inspiration (both are pretty cool):<p><a href="https:&#x2F;&#x2F;www.joshwcomeau.com&#x2F;shadow-palette&#x2F;" rel="nofollow noreferrer">https:&#x2F;&#x2F;www.joshwcomeau.com&#x2F;shadow-palette&#x2F;</a>

Just wanted to say that the &quot;copy Figma layer&quot; option is a really neat touch.<p>If it were me, I&#x27;d make all those copy buttons more prominent: at first I didn&#x27;t see them, and assumed I was expected to inspect the page using developer tools to grab the CSS values.

Brilliant old article on this from Michael Herf (the guy behind Picasa and f.lux) 2001: <a href="http:&#x2F;&#x2F;stereopsis.com&#x2F;shadowrect&#x2F;" rel="nofollow noreferrer">http:&#x2F;&#x2F;stereopsis.com&#x2F;shadowrect&#x2F;</a>

Adds lots of frames to the back button history… not that bad but very irritating

What is &quot;smooth&quot; referring to? Looks a regular box shadow to me.

This is super cool and I&#x27;m definitely bookmarking it for later use :)<p>I&#x27;d suggest moving the &quot;copy css&#x2F;figma&#x2F;link&quot; 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.

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!).<p>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 &quot;Library&quot; part is a great addition.<p>One thing is the history handling - with every change writing a new URL to the history - it&#x27;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.

Nice generator! I&#x27;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.

The first time I saw these layered shadows was in AngularJS Material design whiteframes ( <a href="https:&#x2F;&#x2F;material.angularjs.org&#x2F;latest&#x2F;demo&#x2F;whiteframe" rel="nofollow noreferrer">https:&#x2F;&#x2F;material.angularjs.org&#x2F;latest&#x2F;demo&#x2F;whiteframe</a> ), 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!

It could be cool to add a feature around different &quot;heights&quot; like this one: <a href="https:&#x2F;&#x2F;www.joshwcomeau.com&#x2F;shadow-palette&#x2F;" rel="nofollow noreferrer">https:&#x2F;&#x2F;www.joshwcomeau.com&#x2F;shadow-palette&#x2F;</a><p>You almost have something like that in the library of different shadows.<p>Having a couple different heights is something I&#x27;ve used a lot.

Cool site. None of the copy buttons work though on both Firefox and Chrome:<p>``` app.js:450 Uncaught TypeError: Cannot read properties of undefined (reading &#x27;writeText&#x27;) 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 ```

Those shadows are smooth indeed, very cool project!<p>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.<p>Could be as simple as adding this CSS to the box: resize: both; overflow: auto;

This is very cool. On Linux + Firefox (102.12.0esr) I&#x27;m seeing &quot;navigator.clipboard is undefined&quot; on line 450 when clicking Copy To Clipboard.<p>I second the suggestion to display the CSS so you can see what changes as you use the UI.

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.

I think the title should mention this is a <i>CSS</i> smooth shadows generator. I assumed it was more general purpose before I clicked through.

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.

Feels like we&#x27;re back to 2012 again

On chrome on a phone, selecting Linear does not work, and after selecting it, no changes are possible.<p>Looks great!

Can play with the layered shadows all day!

Is this intended to solve gradient banding?

Really cool, and I can see my designer friends enjoying this.<p>My only gripe is that it seems to break my back button in Firefox

I dont personally have a use for this - but I still find it quite awesome!