CSS Hat

CSS Hat team introducing PNG Hat for your Photoshop!

  • "I’m blown away by how easy CSS Hat makes it to generate valid, nicely coded CSS using Photoshop. It’s a dream come true for many designers and I think it fully deserves all the hype that it’s getting and more."

  • "CSS Hat is a powerful time saver, and a powerful learning tool... CSS Hat is a must for those out there who want to accelerate their workflow."

  • "CSS Hat is a simple and highly useful Photoshop plugin that generates CSS3 based on your Photoshop layer styles."

How CSS Hat works?

1. Select Photoshop layer

Click on a layer designed with some layer styles.

2. Get CSS3 code

Copy to clipboard from CSS Hat plugin. Done.

3. There is no step three

Just enjoy your life!

What makes CSS Hat so special?

CSS Code Instantly In Photoshop

Speed up your workflow tremendously. No waiting. We swear.

Quick, Easy And Loveable Installation

Get your own CSS Hat instantly. It is as easy as falling in love.

Support For 3 CSS Preprocessors

Choose SASS, LESS or Stylus. We even created a LESS Hat library for you.

Customizable Output Is Your Servant

Use optional vendor prefixes or dimensions to get the maximum value.

Works In Photoshop CS4, CS5 & CS6

CSS Hat saves your time in Photoshop CS4 and newer. Future is in your hands.

2 For 1! Licence Per Person For Mac & Win

Use CSS Hat on more devices thanks to a licence per person, not per device.

How CSS Hat looks like?

Saves time Preprocessors Font properties Dimensions Syntax highlighting

CSS Hat saves you hours on every project

CSS Hat supports your lovely syntax sugar – LESS, SASS and Stylus

CSS Hat gives you font properties

You don't have to use ruler to get dimensions

More readable syntax

Instantly generated CSS
3 preprocessors to choose from
CSS Hat generates font-family, font-size, font-weight and font-style.
Turn on dimensions here!
Code is highlighted
  • CSS Hat

NOTE: CSS Hat generates code for LESS Hat mixin library — include it in your project (read more).

NOTE: CSS Hat generates code for Compass CSS3 framework (read more).

NOTE: CSS Hat generates code for Stylus nib framework (read more).

.element {

width: 197px;
height: 82px;

border: 1px solid rgba(0,0,0,.68); /* stroke */

-moz-border-radius: 21px;
-webkit-border-radius: 21px;

border-radius: 21px; /* border radius */

-moz-background-clip: padding;
-webkit-background-clip: padding-box;

background-clip: padding-box; /* prevents bg color from leaking outside the border */

background-color: #e85454; /* layer fill content */

-moz-box-shadow: 0 0 4px rgba(0,0,0,.74), inset 0 1px 1px rgba(255,255,255,.75), inset 0 0 0 1px rgba(252,252,252,.16); /* outer glow, inner shadow and inner glow */
-webkit-box-shadow: 0 0 4px rgba(0,0,0,.74), inset 0 1px 1px rgba(255,255,255,.75), inset 0 0 0 1px rgba(252,252,252,.16); /* outer glow, inner shadow and inner glow */

box-shadow: 0 0 4px rgba(0,0,0,.74), inset 0 1px 1px rgba(255,255,255,.75), inset 0 0 0 1px rgba(252,252,252,.16); /* outer glow, inner shadow and inner glow */

background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iaGF0MCIgZ3JhZGllbnRVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giIHgxPSI1MCUiIHkxPSIxMDAlIiB4Mj0iNTAlIiB5Mj0iLTEuNDIxMDg1NDcxNTIwMmUtMTQlIj4KPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzc2N2U4NyIgc3RvcC1vcGFjaXR5PSIxIi8+CjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2NjZDBkYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgIDwvbGluZWFyR3JhZGllbnQ+Cgo8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgZmlsbD0idXJsKCNoYXQwKSIgLz4KPC9zdmc+); /* gradient overlay */ background-image: -moz-linear-gradient(bottom, #767e87 0%, #ccd0da 100%); /* gradient overlay */
background-image: -o-linear-gradient(bottom, #767e87 0%, #ccd0da 100%); /* gradient overlay */
background-image: -webkit-linear-gradient(bottom, #767e87 0%, #ccd0da 100%); /* gradient overlay */

background-image: linear-gradient(bottom, #767e87 0%, #ccd0da 100%); /* gradient overlay */

font-family: "Helvetica", sans-serif;
font-size: 14px;
font-weight: bold;

}

.element {

.size(197px, 82px);

border: 1px solid rgba(0,0,0,.68); // stroke
.border-radius(21px); // border radius
background-color: #e85454; // layer fill content
.box-shadow(~"0 0 4px rgba(0,0,0,.74), inset 0 1px 1px rgba(255,255,255,.75), inset 0 0 0 1px rgba(252,252,252,.16)"); // outer glow, inner shadow and inner glow
.gradient(~"linear-gradient(bottom, #767e87 0%, #ccd0da 100%)"); // gradient overlay

}

// add these lines to the beginning of .scss file:
@import "compass/css3/border-radius";
@import "compass/css3/background-clip";
@import "compass/css3/box-shadow";
@import "compass/css3/images";

.element {

width: 197px;
height: 82px;

border: 1px solid rgba(0,0,0,.68); // stroke

@include border-radius(21px); // border radius

@include background-clip(); // prevents bg color from leaking outside the border

background-color: #e85454; // layer fill content

@include box-shadow(0 0 4px rgba(0,0,0,.74), inset 0 1px 1px rgba(255,255,255,.75), inset 0 0 0 1px rgba(252,252,252,.16)); // outer glow, inner shadow and inner glow

@include background-image(linear-gradient(bottom, #767e87 0%, #ccd0da 100%)); // gradient overlay

}

// add these lines to the beginning of .sass file:
@import "compass/css3/border-radius"
@import "compass/css3/background-clip"
@import "compass/css3/box-shadow"
@import "compass/css3/images"

.element

width: 197px
height: 82px

border: 1px solid rgba(0,0,0,.68) // stroke

@include border-radius(21px) // border radius

@include background-clip() // prevents bg color from leaking outside the border

background-color: #e85454; // layer fill content

@include box-shadow(0 0 4px rgba(0,0,0,.74), inset 0 1px 1px rgba(255,255,255,.75), inset 0 0 0 1px rgba(252,252,252,.16)) // outer glow, inner shadow and inner glow

@include background-image(linear-gradient(bottom, #767e87 0%, #ccd0da 100%)) // gradient overlay

@import 'nib' // add this line to the beginning of .styl file

.element

width 197px
height 82px

border 1px solid rgba(0,0,0,.68) // stroke

border-radius 21px // border radius

background-clip padding-box // prevents bg color from leaking outside the border

background-color #e85454 // layer fill content

box-shadow 0 0 4px rgba(0,0,0,.74), inset 0 1px 1px rgba(255,255,255,.75), inset 0 0 0 1px rgba(252,252,252,.16) // outer glow, inner shadow and inner glow

background linear-gradient(bottom, #767e87 0%, #ccd0da 100%) // gradient overlay

@import 'nib' // add this line to the beginning of .styl file

.element {

width: 197px;
height: 82px;

border: 1px solid rgba(0,0,0,.68); // stroke

border-radius: 21px; // border radius

background-clip: padding-box; // prevents bg color from leaking outside the border

background-color: #e85454; // layer fill content

box-shadow: 0 0 4px rgba(0,0,0,.74), inset 0 1px 1px rgba(255,255,255,.75), inset 0 0 0 1px rgba(252,252,252,.16); // outer glow, inner shadow and inner glow

background: linear-gradient(bottom, #767e87 0%, #ccd0da 100%); // gradient overlay

}

Copy

Why our users love CSS Hat

  • Josh Brewer These days I have been trying to spend less time in Photoshop and move to code faster. But whenever I do need to spend some time pushing things around, having CSS Hat there to quickly export the CSS of what I just did makes my life a lot easier. Saves me a ton of time.

    Josh Brewer, principal designer at Twitter

  • Jeff Broderick CSS Hat has been the perfect addition to my workflow. It has allowed me to spend more time in Photoshop, doing what I love, while providing accurate results I can trust.

    Jeff Broderick, Visual/UI Designer

  • musHo I never trusted any automated PSD to HTML service. I always coded things manualy pixel-perfect, but CSS Hat saved me already a shitload of time!

    musHo, Product designer of Circle

  • Jay Robinson CSS Hat generates clean CSS3 from your PSD layers. This makes it crazy simple to translate a design from Photoshop to the browser.

    Jay Robinson, UI Designer at Sencha

  • Jackie Tran Thank you guys! I code designs every day, and I always felt that this should be automatic.

    Jackie Tran, Dribbble star

  • Visual Idiot Amazing work, guys! This hat is going to be huge, I love it.

    Visual Idiot, Designer at GoSquared

  • Pixel Ninja I purchased this today and it has already saved me around 1hrs work. Bloody brilliant plugin.

    Pixel Ninja, CSS Hat customer

  • Jack Barham Seriously impressed with CSSHat. It has saved loads of dev time slicing buttons from PSDs to CSS3 on my current project.

    Jack Barham, CSS Hat customer

  • Open Brand Amazing Czech startup CSSHat has just saved us days of work! Spot on guys, cheers!

    Open Brand, CSS Hat customer

  • Bert Devriese CSS Hat definitely is one of my favourite productivity apps of 2012. Saved me soooo much time…

    Bert Devriese, CSS Hat customer

  • Gijs Rogé You should combine LESS with CSSHat mixin's + the photoshop plugin It saves me incredible amounts of time. You wont regret it.

    Gijs Rogé, CSS Hat customer

See how CSS Hat generates CSS3 in Photoshop

Say hello to PNG Hat, a better way
to slice Photoshop design.

Select layers you want, click on export and you are
ready to publish. PNG Hat automatically uploads
assets to the server and with defined HTML/CSS
templates you can paste the picture directly into your code.

Learn more

Demo & Updates coming soon

No spam — we keep your e-mail address safe and do not share it.

Give us kudos

Wall Of Fans

Need help?