Heat maps
CSS Hat

UPDATE: We now support LESS, SASS, SCSS, STYLUS and Text properties. Read more

1. Select Photoshop layer

Click on a layer designed with some layer styles.

2. Get CSS3 with a click

Copy to clipboard from CSS Hat plugin. Done.

3. There is no step three

Just enjoy your life.

How CSS Hat works?

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

  • 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 */

}

.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

Free demo of CSS Hat coming soon!

Subscribe to our newsletter to get notified.

Why they love CSS Hat?

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

    Visual Idiot, Designer at GoSquared

  • 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

  • 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

Design Shack
App Storm
The Next Web

CSS Hat video review

Thanks to Joe Kennedy for his great review!