7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial

Magically Turn Your Photoshop Layers Into CSS3 With CSS Hat

Scroll to top

Adi Purdila Apr 2, 2013

Read Time: 1 min

CSSHat Adobe Photoshop

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

CSSHat Adobe Photoshop

Did you find this post useful?

Yes No

Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.

Adi Purdila

Adi Purdila is a web design instructor for Tuts+. With over 100 courses and 200 tutorials published to date, Adi's goal is to help students become better web designers and developers by creating content that’s easy to follow and offers great value. Being self-taught himself, Adi strongly believes that constant learning (academic or otherwise) is the only way to move forward and achieve your goals. When not typing away at his keyboard, he loves woodworking and caring for his ever-growing family of rescue pets. You can stay up to date with what he's doing by following him on social media or visiting his website at adipurdila.com.

adipurdila