Magically Turn Your Photoshop Layers Into CSS3 With CSS Hat

Today I’m going to show you a Photoshop plugin which aims to greatly improve your workflow. It’s called CSS Hat and it turns your Photoshop layers directly into valid CSS3.


Further Information

  • Download: You can grab CSS Hat from its homepage.
  • Compatibility: CSS Hat is compatible with Photoshop CS4 and upwards, on Mac OS X and Windows.
  • LESS Hat: A bunch of smart LESS mixins.
  • Prefixes: Forget having to cater for multiple browser vendors, CSS Hat will prefix all your styles for you.
  • CSS Preprocessors: CSS Hat also supports output for SASS, LESS and Stylus.

What Can CSS Hat do?

CSS Hat supports the following layer properties:

  • Gradient/Solid color fill layer
  • Drop Shadow
  • Inner Shadow
  • Inner Glow
  • Outer Glow
  • Opacity
  • Gradient Overlay
  • Text Layers
  • Color Overlay
  • Stroke
  • Border Radius
csshat-panel
The panel..
csshat-screenshot-1
The hat..
csshat-screenshot-2
The process..

Webdesigntuts+