Generate CSS from layers

The Copy CSS feature generates Cascading Style Sheet properties directly from Photoshop layers, capturing design specifications that can be pasted into your stylesheet files. This workflow bridges the gap between visual design and code implementation, particularly when preparing assets for web projects or collaborating with developers who need precise style specifications.

Use Copy CSS when you need to translate visual design elements into code-ready style declarations. This feature works with individual shape layers, text layers, or layer groups containing these elements. It generates CSS that can be pasted directly into your stylesheet, capturing design properties with pixel-perfect accuracy. For broader design-to-web workflows, explore layer effects and styles for additional styling options and exporting assets for other output formats.

CSS properties captured from layers

Copy CSS extracts different properties depending on the layer type you select.

Shape layers generate CSS for:

• Size and position coordinates
• Stroke color
• Fill color, including gradient definitions
• Drop shadow effects

Text layers capture shape properties plus typography specifications:

• Font family
• Font size and weight
• Line height
• Text decoration (underline, strikethrough)
• Vertical alignment (superscript, subscript)
• Text alignment

Layer groups create structured CSS classes representing parent-child relationships. The group itself becomes a parent div, while each layer within the group generates a child div. The top and left position values for child elements are calculated relative to the parent container, mirroring standard CSS positioning behavior.

Copy CSS limitations

Copy CSS does not function with Smart Objects. If your layer is a Smart Object, double-click to edit its contents and copy CSS from layers within the Smart Object document, or rasterize the layer first if appropriate for your workflow.

The feature cannot process multiple shape or text layers selected simultaneously unless they are grouped. To copy CSS from multiple layers at once, place them in a layer group first.

Generate CSS code from your layers

The CSS code is now on your clipboard and ready to integrate into your web project. Review the generated properties to ensure they align with your development requirements, and adjust values as needed for responsive design or browser compatibility.