CSS Hat - Turn Photoshop Layers into CSS

Publish date:
Social count:

CSS Hat - Turn Photoshop Layers into CSS

If you develop websites, you may collaborate with designers who send you images of layouts and expect you to recreate it in code. If you want to create websites as a hobby, it can be troublesome if you know HTML but do not know much CSS. That's where CSS Hat comes in.

CSS Hat is a Photoshop plugin that will take your selected layer or layer-group and will turn it into CSS3, LESS, SCSS, SASS, or Stylus code depending on the format you choose. The generated code can be copy and pasted into your text-editor of choice. This reduces creation time and will expedite the process of creating sites.

CSS Hat supports the font-familyfont-size, font-weight, and font-style properties as well as syntax highlighting. Another great feature of CSS Hat is that it auto-generates comments next to each line of code, so people with minimal experience with CSS can understand what it generated.

CSS Hat is compatible with both windows and mac platforms but can only be bought through their website, not the mac app store. The plugin will run you $29.99 (USD).

CSS Hat Website