If you hadn't posted this comment I wouldn't have realized that even existed.

But to OP, thanks for making this. As someone who hates writing complicated CSS but loves good design, this is a great resource. I'm sure there will be haters as with most tools, but this will be useful for me.

Also, a couple of the effects only happen on click, not hover. Would be great to have better messaging about which is which (cursor change, a badge of some kind, or otherwise). Presumably the reason you have to click outside the button to see the code is that the click events get consumed - because some of the effects require clicking. This was actually how I figured out that some of them require clicking.

The highlighting is barely visible on anything.

Without hover: rgb(9, 8, 33)

With hover: rgb(13, 11, 38)¹

¹After blending. The hover actually adds rgba(24, 21, 55, .2) to the box.

Yup, me too. I think clicking both on and around the elements should show the code behind that element.

This was an admittedly lazy design choice. The reason it worked this way was so that input effects could be clicked without opening the modal. The issue has been fixed so that now all effects aside from inputs can be properly clicked :)

Yeah I was about to post that it didn't work on firefox...

Thank you, I almost gave up.

The CSS trick is great, but I have to say the usage of that site is non-intuitive at all.

Thanks for pointing this out... I was sure something was wrong with the site and it wasn't working - hover effects are 'invisible' on my MBP screen.

Yeah its really not obvious how to get the code - there should be a "show css" link under the button.