in ,

How to Convert PSD to CSS in Adobe Photoshop


It is always a redundant task to slice PSD’s into pixel perfect graphics and convert it into CSS code manually. This can be done automatically too. People using the newer versions of Photoshop(CS 6 and CC) can avail the built-in functions to convert graphics directly into stylesheet code. However, those with the older versions can do this through some brilliant third-party plugins. In this tutorial, I am going to show some of the ways to get PSD converted directly into CSS, all in Photoshop itself.

The newest version of PS that is the Photoshop CC (CS 6 too) has got this amazing “Copy CSS” feature which css coding as easy as ever! All the layer properties can be copied and pasted into your DIV styles. CSS 3 styles such as drop shadow, gradients are also supported.
CS 6 Users can download the update from the Creative Cloud to install this feature.





CSS-Hat, in my opinion is perfect for this job. Though it costs $29, the price isn’t much in comparison to the amount of time you can save making use of this plugin. It is super-fast, has got all the css properties and works on previous versions of photoshop too. Moreover, it can also generate LESS, SASS, SCSS etc. code.
This plugin is definitely worth a try. You won’t regret buying this. I personally feel, it is way better than the built in “copy css” feature.



A cloud based service. CSS3PS also converts graphics into css but needs an internet connection for this reason. The best thing about this plugin is that it is available free of cost, unlike CSS-hat. The only drawback of this plugin is that it is slower.


Written by Ali Zohaib

Currently studying Computer Science at LUMS. I am an avid designer, part-time blogger and technology enthusiast.

One Comment

Leave a Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

26 Best Responsive Metro WordPress Themes

25 Best Responsive Metro WordPress Themes

45+ Essential Android Apps for Designers & Developers45+ Essential Android Apps for Designers & Developers

45+ Essential Android Apps for Designers & Developers