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.

    1. 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.
    2. Paste the code into your style sheet document.

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

    This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

    Legal Notices   |   Online Privacy Policy