Save time on your projects

Stylesheet Helper generates CSS out of your layers. It cuts 80% off your web development time.

Get it now for $15 Download demo

Works on and

Minimum Photoshop version is CS5

How It Works

Stylesheet Helper supports the following CSS properties:

font-family, font-weight, font-style, font-size, color, text-decoration

These are extracted directly from the text layer properties. Custom fonts are supported.


The background color is the solid color fill of the layer, if any. All the colors are correctly computed using the blend mode specified in Photoshop.

border (-size, -color)

If the current layer has a Stroke effect applied, it is transformed to a CSS border


For rounded rectangles the rounded corner radius maps to border radius.


The opacity of the layer is retrieved in CSS

background gradient (-moz-linear-gradient, -webkit-linear-gradient)

If the fill of the current layer is gradient fill then it is converted to a CSS gradient


Drop Shadow, Inner Glow, Outer Glow and Inner Shadow parameter are retrieved and converted to CSS box-shadow


For text layers a text-shadow CSS is generated if the Drop Shadow effect is in use

width, height

Solid layers have their dimensions retrieved to CSS width and height

You can adjust the CSS formatting using the settings panel, also you can choose whether to use vendor specific CSS extensions:

What the buyers think

Beeing a graphic designer, it is almost magic to see how easily I can transform a psd layout into a web page with StyleSheet Panel. This is something that makes my work a lot easier, and I love how accurate the webpage turns out to be. Great tool that I will be using daily in my work.

Denisa Nastase

Graphics Designer,

For me StyleSheet Panel rapidly become the most used option in Photoshop. It allows me to focus on actually develop the website features without losing precious time on html implementation.

Bogdan Balazsfi

Freelance Web Developer,