LearnCreate CSS3 with a Photoshop Interface


writes on May 13, 2011

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.


Learning with Treehouse for only 30 minutes a day can teach you the skills needed to land the job that you've been dreaming about.

Get Started

14 Responses to “Create CSS3 with a Photoshop Interface”

  1. Does your last name “Pettit” refer to the gerbil that you always have stuck to your head?

  2. Used to be the other way around – photoshop then figure out the css3 – funny how times have changed.

  3. LayerStyles is nice addictive css tool I ever used..

  4. Thành Tăng Hiệp on May 19, 2011 at 5:59 am said:

    good job, thanks vety much.
    If code add -webkit- , -moz- prefix is okey kaka

  5. Thanks for the nice article.

  6. It’s a great job, i’ve sent emails to Felix for minor bugs and he answered  very fast. Very sympatic !!

  7. Raspameti on May 14, 2011 at 1:54 pm said:

     Would someone be so kind to explain me how this work? thanx a bunch!

    • It’s magic! 🙂

      Actually, it’s some combination of HTML, CSS, and JavaScript, which is almost like magic. I’m sure if you emailed or tweeted to Felix, he would be happy to explain. Also, all the code is on Github, so you can explore in depth there if you’d like.

  8.  I couldn’t agree less . . .

  9.  interesting man…making css has never been so easy

  10. Sarah Le on May 13, 2011 at 8:03 pm said:

    Awesome! Sometimes, it’s good to not have to reinvent the wheel! Thanks for sharing with us!

Leave a Reply

You must be logged in to post a comment.

man working on his laptop

Are you ready to start learning?

Learning with Treehouse for only 30 minutes a day can teach you the skills needed to land the job that you've been dreaming about.

Start a Free Trial
woman working on her laptop