Unlimited PS Actions, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
  1. Design & Illustration
  2. Interface Design

Magically Turn Photoshop Layers Into CSS3 With CSS Hat

Read Time:1 minLanguages:

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.

Sponsored Content

This is a sponsored review or giveaway of a product/service that's particularly relevant to our readers.

The Screencast

Alternatively, Download the video, or subscribe to Webdesigntuts+ screencasts via YouTube

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
The panel..
The hat..
The process..
One subscription.
Unlimited Downloads.
Get unlimited downloads