Service automatically converts Photoshop layers into CSS3

We are happy to announce that long-awaited feature is now available in the Psd2HtmlConverter service. Now it automatically converts Photoshop layers into CSS3 code, and does it just in a matter if seconds. Since this moment the service of automated PSD to HTML5/CSS3 conversion will handle a lot of routing tasks for you and will help you to save more time.

Service is able to convert:

For image layers:

  1. Rounded borders  – create shape with any combinations of rounded borders
  2. ‘Stroke’ style
  3. ‘Inner shadow’ style
  4. ‘Drop shadow’ style
  5. ‘Inner glow’ style
  6. ‘Outer glow’ style
  7. ‘Gradient overlay’ style
    • Linear Gradient
    • Radial Gradient
    • Reflected Gradient
  8. ‘Color Overlay’ style

For text layers:

  1. ‘Color Overlay’ style
  2. ‘Drop shadow’ style
  3. ‘Outer glow’ style

When generating CSS code for layer styles, the service also creates vendor prefixes for following browsers:

  1. Mozilla Firefox
  2. Opera
  3. Internet Explorer
  4. Webkit family

Soon we are going to:

  1. Support ‘Pattern Overlay’ style
  2. Partially, as far as possible in the CSS3, support ‘Bevel & Emboss’ style
  3. Support different blending modes, since some browsers are starting to support them

Recommendations on the PSD template preparation:

  1. Use ‘Shapes’, ‘Layer masks’ and ‘Clipping Masks’ extensively.
  2. Use only those layer styles which it is possible to convert into CSS3 code. I.e., do not use the following layer styles: ‘Satin’, ‘Bevel & Emboss’, ‘Pattern Overlay’.
  3. Do not rasterize layers! When you rasterize a layer, you lose all the information that allows the service to convert a layer style into CSS3 code.



On the examples below you can see what kind of code you will get for layers with quite complex styles.

Radial gradient  + rounded borders

Original PSD file: Radial Gradient.psd


CSS code generated by service:

Reflected Gradient + rounded borders + Stroke + Drop/Inner Shadow +  Inner/Outer Glow

Original PSD file: Reflected gradient, stroke, shadows, glows.psd


CSS code generated by service:


Leave a Reply

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