CSS Hat
shares

CSS Hat 2

Select any Photoshop Layer and get CSS instantly. $39.99 Buy CSS Hat Now

Don’t have Photoshop CC 2014 or higher? Get an older version of the CSS Hat!

Buy CSS Hat 1 for $14.99

Colors, gradients, sizes, borders…
All instantly in CSS.

Using CSS over images gives front-end developers many benefits. However it requires a ton of hand-coding to reflect all the layer styles into the code. CSS Hat prevents this pain. It accurately translates layer styles into CSS in a jiffy - no waiting, forget hand-coding, we pinky promise!

See how accurate CSS Hat is

Layer Styles in a click

Got the perfect combination of fills, borders and shadows? Instantly get CSS for that!See supported layer styles

Dimensions

No more marquee tool to manualy measure layer sizes. Get it all in CSS Hat.

Multiple Layers New

Select multiple layers and get CSS code for each layer with separate selectors.

Font styles and paragraph styles in a breeze.

Font-family, font-weight, font-size… all the details that really matter in typography. Now you don’t have to inspect each text layer and manually transform it into CSS. CSS Hat will do that for you automatically. Even if the layer has multiple font styles!

I need an eight day of the week CSS Hat works great with text!

Font Styles

Font-family, underline, weight, line-through...whatever, get it instantly with CSS Hat!

Paragraph Styles New

Multiple font styles in one text layer are exported as separate style rules.

Typekit Integration New

Instantly get a Typekit link for any compatible fonts. For available fonts instantly get a compatible font name and a link on Typekit.

CSS Hat

At your fingers - get Less, Sass, Stylus, or any other language instantly

Using CSS preprocessors allows you to forget about writing a ton of vendor prefixes for all the different browsers. And that’s why CSS Hat also supports Less, Sass, or Stylus. Even more, create your own code template for your favorite language.

Simple to use and easy to read.

Instead of coding yourself to tears, you get a neatly formatted and color highlighted code. With the preview feature, you are even able to see how it will look like on the web. Make the process even easier - with our enhanced copy functionality you can easily implement small parts of the code.

CSS Hat

Enhanced Copy

Copy all of the code or just a single line when you need just the size or a color.

Syntax Highlighting New

Syntax highlighting makes it easy to read and understand the CSS code.

Live Preview New

Select any layer and see how it would look like immediately in the browser.

A handful of companies enjoy using CSS Hat

See Entire Wall of Fans
“I try to spend less time in Photoshop and move to code faster. But whenever I do need to spend some time pushing things around, having CSS Hat there to quickly export the CSS makes my life a lot easier. Saves me a ton of time.”
Josh Brewer
“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
“I love what you guys have been doing. The Adobe extension community is terrible small, so it's nice seeing that people like you are putting in such high quality work as your panels.”
Cameron McEfee
“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
“CSS Hat is a simple and highly useful Photoshop plugin that generates CSS3 based on your Photoshop layer styles.”
Harrison Weber
“It’s super valuable Photoshop Extension and that’s why it costs $39. I love the tool, I use it literally all the time!”
Sahil Lavingia

Start making awesome stuff like these companies!

$39.99 Buy CSS Hat Now