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
Got the perfect combination of fills, borders and shadows? Instantly get CSS for that!See supported layer styles
No more marquee tool to manualy measure layer sizes. Get it all in CSS Hat.
Select multiple layers and get CSS code for each layer with separate selectors.
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!
Font-family, underline, weight, line-through...whatever, get it instantly with CSS Hat!
Multiple font styles in one text layer are exported as separate style rules.
Instantly get a Typekit link for any compatible fonts. For available fonts instantly get a compatible font name and a link on Typekit.
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.
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.
Copy all of the code or just a single line when you need just the size or a color.
Syntax highlighting makes it easy to read and understand the CSS code.
Select any layer and see how it would look like immediately in the browser.
“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
Easily explore Photoshop/Sketch designs and get assets and measurements fasterDownload Avocode now
The idea itself is a breakthrough.
Everything is seamless, well designed, timely. I know what to expect. And not just the app but your emails, installation process, site, etc.
Keep doing your great work!
Thank you for such a great tool. Keep it up.
Great work, you've saved me countless hours all ready. Keep up the awesome work!
You guys rock, keep up the amazing work!
Thank you for your great customer service! You're the only company I know who really cares what customers think and what they need most.
Not really ;). Keep up the good work!
Thanks ever so much for making CSS Hat!
Great work, love the plugin.
Thank you for creating such a great product, it's the best Photoshop plugin ever!
Thanks for your job, it's good and cheap.
Your plugin has made my life as a developer a whole lot easier and my workflow a lot faster. Making templates from PSDs used to be a pain, now it's a quite nice experience and there's more room for me to be creative as a developer
I just want to thank you, for providing a tool that really has improved some of my CSS development speeds.
CSSHat should be a required tool in every web developer's arsenal.
I dig your app. Use it a bunch. It's helped me start rolling my own code. Got to get you guys a beer!
Well just that I think you are a go-getter crew and I wish and pray you the best and most success ever for all your good efforts!
It's easy and makes my live better
CSS Hat is far and away the most useful design tool I've found to date!
Love your product glad to be using it!
Keep up the great work.
Love your work. Thanks.