CSS Hat: Turn Photoshop Layers Into CSS3 Code With a Click

Time’s a very limited resource, and most of us are looking for ways to share extra minutes off our work whenever we can. Whether it’s with a text-expanding app, a web app, or a snippet library, there’s tons of ways software can speed you up, and it’s always great to find new ways to make your computer help you save time.

More often than not, though, these solutions are all over the place, and while they offer a speedy way to get the results you want, they aren’t very intuitive. For example, there are plenty of web apps out there that allow you to get CSS3 gradients, but in order to get exactly what you want, some require you to edit the code after you’ve mess around with its interface. So, wouldn’t it be cool if you could do it all from one application that you are already using? Wouldn’t it be cool to get almost-perfect results?

Of course it would. That’s why we were excited about CSS Hat. CSS Hat is not an app or a web app, but rather a Photoshop extension that’ll help you concentrate in your code and design rather than worry about vendor prefixes and RGBA vs HEX or the like. We don’t usually review Photoshop extensions, but since many of our readers use Photoshop and need an easier way to make CSS on their Macs, we thought you’d enjoy seeing our thoughts on our review copy of CSS Hat.

The CSS Hat Mission


CSS Hat inside Photoshop

So what does CSS Hat do exactly? Well, in a few words, CSS Hat turns Photoshop layer styles into CSS that you can then paste into your editor of choice. That’s all. No, really, that is pretty much what it does, but it does a masterful job at it.

See, when install CSS Hat, you can open any PSD file and select a layer that contains some styles. CSS Hat will then display CSS it generates based on the styles in that layer. CSS Hat also allows you to turn on and off comments, width and height of the object, vendor prefixes, and other useful things.


Copy your code and tweak settings to get just what you want

Ultimately, CSS Hat’s mission is to save you time and hassle, and without a shadow of a doubt, it does that. There is no need to mess around with web apps in order to get the exact gradient you wanted, convert HEX to RGBA, or try to remember how to make a circle with pure CSS. All of these things are taken care of for you by CSS Hat. The best part of using CSS Hat, however, is that if you’re already used to using Photoshop, there’s absolutely zero learning curve to using CSS Hat.

The Uses of CSS Hat

But, how useful can this little tool really be? Quite useful, actually. Let’s forget about how great it is for saving time and helping you create beautiful elements; that’s an obvious benefit of the app if you spend your days creating CSS. No, even if you didn’t use it for actual design work, it could still be insanely useful as a learning tool. Think about it: if you’re a designer who knows nothing about development or CSS but you’d like to learn, CSS Hat can help you learn CSS as you create your awesome mockups. As you make buttons and layouts, you’ll have a CSS reference to each of those pieces. Cool, right?

The Downsides of CSS Hat


From Photoshop to your browser, all in pure CSS

Sadly CSS Hat is not perfect, but most of it is not CSS Hat’s fault. For instance, there are a few styles that CSS Hat can’t convert to CSS. This is due to the fact that either there is no way to translate that Photoshop style into CSS, or that there is no CSS property that allows you to do what that style is doing.


If only CSS could do everything Photoshop can…

It is a little upsetting that sometimes you won’t get exactly what you want, but at the end of the day, you can’t really blame CSS Hat; however, there are a few things that CSS Hat should mend, such as their gradient support. Gradients are transformed into CSS by CSS Hat with percentages, degrees, and HEX. This is fine, but some of us want RGBA, and pixels. It would be awesome to see an option that would allow us to pick which format we want of CSS gradients we want.

Also, when CSS Hat is open and you try to double click on a layer to rename it, you won’t be able to. Once you close CSS Hat, you’ll be able to rename it again. A little bug perhaps, but nothing huge.


So, how accurate is it, you ask. Good question. Turns out, CSS Hat is pretty accurate. Let’s take a look at the code below.


Some CSS Hat-generated CSS code

As you can see, this is a simple button that CSS Hat was able to make from a rounded rectangle with a few styles. In it, you can see width and height, border radius, background(s), box shadow, comments, and even background clips which prevent background colors from leaking outside of the border. The only thing absent in this code was the stroke style. This is due to the fact that CSS Hat can’t handle gradient-filled borders — fear not though, borders with solid colors are good to go.


Our test Photoshop design rendered in CSS in Safari


It is hard to not recommend CSS Hat to those who work in the web design field. CSS Hat is a powerful time saver, and a powerful learning tool for those out there who lack CSS knowledge. With features like SASS and LESS support and more coming in future updates, CSS Hat is a must for those out there who want to accelerate their workflow. It’s also 30% off at the moment, so if you are interested, now may be the time to grab a copy.

If you give it a try, we’d love to hear your thoughts about how CSS Hat helps out your web development workflow!


CSS Hat turns Photoshop layer styles to CSS3 with a click.