CSS Hat – Turn Photoshop Layer Styles into Clean CSS3

CSS Hat is a new Photoshop extension that makes it easy for designers to translate their Photoshop mockups to the web by giving you the CSS code for your layer styles.

Just click a layer, see it’s CSS, copy it into clipboard, and paste it into your favorite editor and you are ready to go!

CSS Hat started as a weekend project on Startup Weekend Prague, where the guys from CSS Piffle had an idea to translate Photoshop layer styles to CSS3. They had a proof of concept working in 24 hours and decided to polish it into a commercial product.

CSS Hat shows you the CSS for the currently selected shape and will even measure and detect rounded corners on vector shapes – so you can be sure to get the exact same thing in browser.

There are also options to add comments in the css that describe where the value is coming from, adding browser prefixes, include the width and height of the shape, and generate a rule based on the layer name.

In addition to adding browser prefixes, CSS Hat will even generate SVG for IE9!

CSS Hat is a promising first release and the team already has a plan for the future with LESS, SASS, and COMPASS support, in addition to other features like text properties.

You can find out more about CSS Hat on their website or on Twitter.

Jumpstarting a Design Community

Understand Your Compensation

Designer Monoculture

The State of Design Leadership

The Science of Product Design

Interview with Michael Flarup: Co-Founder and Lead Designer at Robocat

The Importance of Design Conventions