Menu Search
Jump to the content X X
Smashing Conf Barcelona 2016

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

Photoshop Layer Styles in CSS3

I just ran across this awesome project by Felix Niklas and it blew my mind. it’s an HTML5 app for creating CSS3 in an intuitive way. The interface is very similar to Photoshop and functions just like it as well. I wrote a little preview/breakdown/review of it.

LayerStyles - HTML5 App1

The Breakdown Link

LayerStyles2 is just like you favorite graphic editor – but in your browser. And it creates CSS. The screenshot above is how the editor looks like. There’s a lot of really interesting features that’s included with it.

  1. Layer Styles
    This is where you can find some of the default CSS3 layer styles that are included by default. You can also create your own layer styles and what’s nice about this is that your color swatches, gradients and styles are locally stored so when you open this site up again, you don’t have to re-create your styles again.
  2. Style Properties
    This online app gives you some different styles that you can customize. There are 5 different ones that you can use. There is a drop-shadow, an inner-shadow, background, border, and border-radius. The sliders and settings look and work just like if you were still in Photoshop. The gradient tool is a little-buggy but is definitely still usable.
  3. Preview
    This is your layer styles preview. When you edit the layer style properties, the changes are shown here.
  4. Drag and Drop Images
    I thought this was neat. You can actually drag your own images here and use it for reference. You can also use their color-picker and select colors from your reference image. This comes in real-handy if you are going to try to re-create a button or something.
  5. CSS3 Code
    This is where you can see your CSS3. You can easily select the code and copy it. There’s a copy button but I’ve tested in my browser and it doesn’t seem to work. Also, the only gripe I have is that some of the vendor prefixes aren’t used. For instance, if I create a rounded border, it doesn’t include the vendor prefix for Mozilla or webkit. But that’s no problem for me because I can easily just paste the code into PrefixMyCSS73 and let them ad the specific vendor prefixes that I need.

It took me all of 30 seconds to figure out how this tool works and I’ve added it to my bookmarks. This is definitely going to be very helpful for me. My favorite site to create CSS3 before was CSS3 Generator4 but I think I’ll start using LayerStyles from now on. With some more tweaks and additions, this tool would be perfect.

Additional Information Link

What do you all think of this HTML5 App? What are some improvements that you think can be made? Let me know what your thoughts are in the comments. Also, feel free to ask me any question you may have. Thanks!

Footnotes Link

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
SmashingConf Barcelona 2016

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.

↑ Back to top Tweet itShare on Facebook


Former editor in chief of Designinformer.

  1. 1

    this is freakin’ awesome. great post.

  2. 2

    Very cool, in Safari. My Firefox simply doesn’t show the editor’s window :(

  3. 4

    Very nice little tool.

    I remember seeing something adobe was working on that also gave you a timeline and worked animations into it as well.

  4. 5

    Well thank you for this really useful post, great tool!

  5. 6

    Pretty cool!! HTML5 is more impressive day after day!


↑ Back to top