Generar CSS a partir de capas

Última actualización el 2/11/2026

Aprende a extraer código CSS de capas de forma y texto para traducir las propiedades de diseño en hojas de estilo listas para la web en Adobe Photoshop.

La función Copiar CSS genera propiedades de CSS directamente desde las capas de Photoshop, y captura las especificaciones de diseño que se pueden pegar en los archivos de hoja de estilo. Este flujo de trabajo cierra la brecha entre el diseño visual y la implementación del código, especialmente al preparar recursos para proyectos web o colaborar con desarrolladores que necesitan especificaciones de estilo precisas.

Utiliza Copiar CSS cuando necesites traducir elementos de diseño visual en declaraciones de estilo listas para el código. Esta función funciona con capas de forma individuales, capas de texto o grupos de capas que contienen estos elementos. Genera CSS que se puede pegar directamente en la hoja de estilo, y captura las propiedades de diseño con una precisión perfecta a nivel de píxel. Para flujos de trabajo más amplios de diseño a web, consulta Efectos y estilos de capa para obtener opciones de estilo adicionales y exportación de recursos para otros formatos de salida.

Propiedades de CSS capturadas de capas

Copiar CSS extrae diferentes propiedades según el tipo de capa que selecciones.

Las capas de forma generan CSS para:

  • Coordenadas de tamaño y posición
  • Color del trazo
  • Color de relleno, incluidas las definiciones de degradado
  • Efectos de sombra paralela

Las capas de texto capturan las propiedades de forma además de las especificaciones de tipografía:

  • Familia de fuentes
  • Tamaño de fuente y grosor
  • Altura de línea
  • Decoración de texto (subrayado, tachado)
  • Alineación vertical (superíndice, subíndice)
  • Alineación de texto

Los grupos de capas crean clases de CSS estructuradas que representan relaciones principal-secundario. El grupo en sí se convierte en un div principal, mientras que cada capa dentro del grupo genera un div secundario. Los valores de posición top y left para los elementos secundarios se calculan en relación con el contenedor principal, lo que refleja el comportamiento estándar de posicionamiento de CSS.

Limitaciones de Copiar CSS

Copiar CSS no funciona con los objetos inteligentes. Si la capa es un objeto inteligente, haz doble clic para editar su contenido y copiar el CSS de las capas dentro del documento del objeto inteligente, o convierte la capa en mapa de bits primero, si resulta adecuado para tu flujo de trabajo.

La función no puede procesar varias capas de forma o de texto seleccionadas simultáneamente a menos que estén agrupadas. Para copiar el CSS de varias capas a la vez, agrúpalas primero en un grupo de capas.

Generar código CSS a partir de tus capas

En el panel Capas, haz clic con el botón derecho en una capa de forma, una capa de texto o un grupo de capas, y selecciona Copiar CSS en el menú contextual. También puedes seleccionar la capa y, luego, seleccionar Copiar CSS en el menú del panel Capas.

Abre el documento de la hoja de estilos y pega el código generado con Ctrl + V (Windows) o Command + V (macOS).

El código CSS ya está en tu portapapeles y listo para integrarlo en tu proyecto web. Revisa las propiedades generadas para asegurarte de que cumplan tus requisitos de desarrollo, y ajusta los valores necesarios para el diseño interactivo o la compatibilidad con el explorador.