I’ve never been a big fan of CSS generators, but this one is just way too cool! LayerStyles, a web app created by Felix Niklas, allows you to generate CSS using an interface that looks almost exactly like the layer styles dialog box in Photoshop.

Screenshot of LayerStyles.org

I advocate writing your CSS manually so that you maintain an intimate understanding of your code, but at the same time, Felix’s tool is more than a curiosity. If you’ve ever created a high fidelity mockup in Photoshop, you’re probably familiar with the tedious process of translating your design into modern markup and styling. Or, perhaps you’ve created a layer style, but you’re unsure how to recreate the effects with CSS.

With LayerStyles, you can fluidly iterate on an effect in the browser environment and watch the CSS generate in real-time. Lots of other CSS generators do this of course, but using the extremely familiar layer styles dialog box makes it much easier for people to make the logical leap between Photoshop and real CSS code.