CSS Hat 2: Convert Photoshop Layers into CSS instantly

It is indeed tiring to translate all your Photoshop layer effects into CSS hat.

Writing all that CSS, can take up hours to complete. What if we tell you, that now you don't need to code a single line of CSS for your Photoshop layers anymore?

Because now you have CSS Hat 2. A magical Photoshop plugin that converts all your Photoshop layers into pure CSS3.

It is an ultimate workflow booster for web designers and developers, who would like to utilize their time efficiently. With the updated version and loads of additional features, it is something that we highly recommend.

CSS Hat is compatible with both Windows and Mac machines.

Get this powerful tool for just $20.99 (DealClub $15.75)

Watch CSS Hat in action:


  • Translate layer styles into CSS: It requires a ton of hand-coding to reflect all the layer styles into CSS. CSS Hat prevents this pain. It accurately translates layer styles into CSS in a jiffy.
  • Font styles and paragraph styles in a breeze: Now you don’t have to inspect each text layer and manually transform it into CSS. Even if the layer has multiple font styles!
  • Get Sass, Less, Styles instantly: Using CSS preprocessors allows you to forget about writing a ton of vendor prefixes for all the different browsers.
  • Easily extensible by middlewares: This plugin system lets you extend the functionality of CSS Hat. Middlewares can alter the output and each one can be doing something specific.
  • Simple and easy to read: Code output has syntax highlight for good readability. Everything works instantly and is real-time.
  • Instantly get a compatible font name and a link on Typekit.com or Google Fonts or Google Fonts for available fonts.

Layer Styles supported by CSS Hat


The Conversion Process:


It also supports translation into CSS-Preprocessor syntax like Sass, SCSS, LESS, and Stylus.


One thing to note, however, is that the generated output of LESS code uses LESSHat mixins library, CSS Hat’s sibling. So, to ensure that you can use the output, download the library, and include this line at the top your LESS stylesheet.

@import "lesshat.less":

It uses Compass to generate CSS3 mixins for SCSS or Sass.

Output example:


What others are saying...

"CSS Hat is exactly what I needed at this point in time. While Sketch could be the solution in a year or two, this allows me to continue developing quickly and accurately without drastically changing my workflow." - Joshua Sortino, Disqus

"CSS Hat generates clean CSS3 from your PSD layers. This makes it crazy simple to translate a design from Photoshop to the browser." - Jay Robinson, Groupon

"It is a simple and highly useful Photoshop plugin that generates CSS3 based on your Photoshop layer styles.” - Harrion Weber, The Next Web

"It’s super valuable Photoshop Extension and that’s why it costs $35. I love the tool, I use it literally all the time!” - Sahil Lavingia, Gumroad

Deal Terms:

  • You will receive a coupon code which needs to be redeemed on CSS Hat website.
  • This software works on Mac and Windows with Photoshop CC 2014 or Photoshop CC 2015
  • Customer support and updates with bug fixes will be provided.
  • Licensed on a per user basis for all of your personal computers.


There are no reviews yet.

Only logged in customers who have purchased this product may leave a review.

Scroll to Top