What can CSS Hat do?

CSS Hat is a Photoshop Plugin that lets you easily translate layer styles into CSS. Just select any layer and the code will appear in the panel. It even works when you select multiple layers – you will get the CSS code with selector for each layer.

On the export side, CSS Hat outputs pure standards-based CSS3 (and optionally vendor-prefixed properties for all major browsers), LESS, SASS and Stylus. You can also create your custom templates for your preferred languages.

Which layer styles does CSS Hat support?

CSS Hat supports these layer styles:

CSS Hat 2 supported layer styles

Other styles are not supported simply because of the fact that they are almost impossible to recreate using CSS. However, we are always innovating and trying to find other ways around.

Does CSS Hat work with text layers?

CSS Hat works great with text layers! The support for text layers has been dramatically improved in the latest update. CSS Hat can now give you properties like font-size, font-style, font-weight and text-decoration like line through, uppercase, small caps and underline.

CSS Hat also detects if there are more font styles in one text layer and automatically makes respective CSS selectors for each of them.

I do not have Photoshop CC, how can I access older version of CSS Hat?

You can access all of the previous CSS Hat versions directly in your Source Profile. Just click the link “Version 2.0” and a pop-up with the change log should appear. All of the version are available to download from there.

Can I purchase the older version compatible with Photoshop CS4+?

We offer a 50% discount to all users without Photoshop CC. Just click here to get this offer.

I am a designer — what can I do to make my designs easier to code?

I have another question to ask…

Please visit our Help Center