Copy CSS from layers

Copy CSS generates Cascading Style Sheet (CSS) properties from shape or text layers. The CSS is copied to the clipboard and can be pasted into a style sheet. For shapes it captures values for the following:

size

position

stroke color

fill color (including gradients)

drop shadow

For text layers, Copy CSS also captures the following values:

font family

font size

font weight

line height

underline

strikethrough

superscript

subscript

text alignment

Copying CSS from a layer group containing shapes or text creates a class for each layer as well as a Group class. The Group class represents a parent div containing child divs that correspond to the layers in the group. The top/left values for the child divs are in relation to the parent div.

Note:

The Copy CSS command does not work with Smart Objects or when selecting multiple shape/text layers that are not grouped.

In the Layers panel, do one of the following:

Right-click a shape/text layer or layer group and choose Copy CSS from the context menu.

Select a shape/text layer or layer group and choose Copy CSS from the Layers panel menu.

Paste the code into your style sheet document.

For more information on creating web pages with Photoshop, see Slice web pages.

Twitter™ and Facebook posts are not covered under the terms of Creative Commons.