Product Review: CSS Hat – Generating CSS3 from Photoshop layers

CSS Hat is a Photoshop plugin that does something wonderful. It takes effects from a layer, and converts them to CSS3. If you are a Photoshop person, who never does web, why would you care? Because you probably have to give images to someone actually doing the web site. Because you’ve probably been asked to skin components, like buttons. Because it has to look good on mobile devices, especially an iPad. You need to take a serious look at CSS Hat.

The typical workflow is to create raster images, and someone else does some CSS magic (hopefully). Now imagine doing those things, only they are scalable, without needing an SVG, and they are rendered with CSS3, that you provide, but didn’t write. This is  CSS Hat. There are no image file links to mess up. The browser is rendering cached CSS, rather than cached images. So, you have speed, less file management, and when people touch/zoom your page, everything looks nice and crisp. That’s a better mousetrap.

Playing with the basics

After installing on my CS6, I decided to start playing with primitives, basic vector shapes. I created a single layer with a lazy circle, and added a simple drop shadow effect on the layer. It’s important to note that while the default blending is set to multiply, I needed to change it to normal. If you have effects that aren’t supported, the CSS Hat code window will tell you. You can add Mozilla, height/width, and also name the CSS class as your layer name. Very nice. The result is the shape and it’s shadow effect in pure CSS3!

I love the Copy to Clipboard button in the plugin. Jumping into Dreamweaver (or any web editor of your choice), I made a simple html file with a <div>, and a class. For time’s sake, I just added the style in the header. And voila! I had my shape and my shadow, no images.

There are a number of effects that are supported, though not all (no surprise). I was able to successfully combine multiple effects, including some crazy gradient overlays too gaudy to post. The point is that I had the power to use my Photoshop imagination, and transfer it to pure CSS. That’s a really big deal. This took very little time.


Being a developer, I can do some crazy things even a designer would’t necessarily try, like using inner and outer stroke effects, as opposed to changing the primitive property. Why? Because all those properties will not get converted to CSS. The plugin works on the effects. Software is not a perfect thing, and sometimes there are bugs. I found some, but nothing to remotely dampen my enthusiasm. As a Photoshop user, you know there are many ways to do an effect, and I was able to work around things. I also know I can use multiple layers in html, just as I can in Photoshop.

So I sent some sample files to support, because it’s always good to help the developers out. This also allows me to gauge the support response. I’m happy to say it was right away, and some fixes are coming. I’m really happy with their response, very knowledgeable and enthusiastic. A great sign.


Any Photoshop designer who does anything for the web should have this plugin. It’s a mere $19.99, and worth it. I was surprised at how well it worked. It exceeded my expectations. I’ve shown a number of colleagues, and we agree that Adobe should have done this for CS6. It’s useful, simple to understand and quick to implement. We were all impressed. If you’re still using images of shapes, effects, gradients, you need to stop it. You need to embrace CSS. CSS Hat is a real winner. It’s going to make your web pages better, and it is super easy. I highly recommend it.


Category(s): Adobe, CSS, HTML5
Tags: , , , , ,

Comments are closed.