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?
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 */
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
}
Why our users love CSS Hat
-
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
-
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
-
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
-
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
-
Thank you guys! I code designs every day, and I always felt that this should be automatic.
Jackie Tran, Dribbble star
-
Amazing work, guys! This hat is going to be huge, I love it.
Visual Idiot, Designer at GoSquared
-
I purchased this today and it has already saved me around 1hrs work. Bloody brilliant plugin.
Pixel Ninja, CSS Hat customer
-
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
-
Amazing Czech startup CSSHat has just saved us days of work! Spot on guys, cheers!
Open Brand, CSS Hat customer
-
CSS Hat definitely is one of my favourite productivity apps of 2012. Saved me soooo much time…
Bert Devriese, CSS Hat customer
-
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