Sweet: CSS Hat turns Photoshop layer styles into CSS3, now available on Windows and Mac

CSS Hat is a simple and highly useful Photoshop plugin that generates CSS3 based on your Photoshop layer styles. It’s easily one of the most useful Photoshop plugins I’ve ever seen, and now after much demand (since meeting success on the Mac), the team is releasing CSS Hat on Windows today.

Of course, this $20 plugin can’t do all of your work for you — there are limitations in CSS3 that prevent it from being able to accurately render things like satin and pattern overlays (note: font properties are coming soon) — but still, it’s a great time saver, especially as CSS3 is new and has yet to be hammered into many Web designer’s minds.

After a simple install process, you can access the plugin by going to Window > Extensions > CSS Hat. From there, simply select a layer and click on the CSS Hat panel, where you can view and copy the CSS, add comments, generate vendor-specific prefixes, add the width and height of the selected layer and more.

More specifically, here’s what CSS Hat can do, according to the creators:

Hat works in Photoshop CS4 (or newer), and supports the following layer properties:

• gradient and solid color fill layers
• layer opacity and fill
• layer effects:
  • drop shadow
  • inner shadow
  • inner glow
  • outer glow
  • gradient overlay
  • color overlay
  • stroke
• text layers:
  • export of font color and text shadow (more features are in pipeline, suggest one)
• width and height
• border radius — draw a rounded rectangle or a circle, get border-radius definitions

On the export side, CSS Hat outputs pure standards-based CSS3, and also (optionally) vendor prefixed properties for all major browsers. We even render gradients into SVG for Internet Explorer 9. Check out use cases coded with CSS Hat on jsFiddle: musHo’s form and Idiot’s UI kit.

We first covered this plugin back in April when its creators won the Prague Startup Weekend event. Since then, it has clearly undergone plenty of polish, and has become a go-to resource for me overnight; a tool to help quickly transfer designs from Photoshop to the Web.

➤ CSS Hat (for CS4 or newer) — $19.99