{}
Aprende diseño y desarrollo web
Cursos gratuitos interactivos

@property: custom properties tipadas y animables

Aprende a registrar variables CSS con `@property` para que el navegador entienda su tipo real y pueda animarlas de forma fiable en gradientes, barras, ángulos y temas dinámicos.

Una custom property normal es flexible, pero el navegador la trata como texto. Eso basta para reutilizar valores, no para interpolarlos con precisión.

Con `@property` registras su sintaxis, si hereda y el valor inicial. Ese contrato hace que deje de ser una cadena opaca y pase a comportarse como un dato real: ángulo, porcentaje, número o color.

La consecuencia práctica es enorme: puedes animar variables de diseño sin meter JavaScript en medio ni duplicar reglas con valores fijos.

  • No es una nueva forma de declarar tokens; es una forma de volverlos entendibles para el motor de estilos.
  • Sin registro, dos valores como `0deg` y `360deg` viven dentro de una cadena. El navegador no siempre puede construir una transición suave entre ambos.
  • Con `@property`, la variable tiene tipo. Entonces sí puede interpolar y validar, igual que hace con propiedades nativas.
  • Sintaxis: define el tipo esperado, por ejemplo `<angle>` o `<percentage>`.
  • inherits: decide si el valor viaja por herencia.

Qué cambia cuando registras una variable

No es una nueva forma de declarar tokens; es una forma de volverlos entendibles para el motor de estilos.

Sin registro, dos valores como `0deg` y `360deg` viven dentro de una cadena. El navegador no siempre puede construir una transición suave entre ambos.

Con `@property`, la variable tiene tipo. Entonces sí puede interpolar y validar, igual que hace con propiedades nativas.

  • Sintaxis: define el tipo esperado, por ejemplo `<angle>` o `<percentage>`.
  • inherits: decide si el valor viaja por herencia.
  • initial-value: evita estados ambiguos cuando nadie ha escrito la variable todavía.

Registro mínimo viable

La forma más útil de aprenderlo es con un caso que luego puedas animar.

Patrones donde realmente luce

No hace falta usarlo en todos los tokens del sistema. Sí en los que quieras animar o validar mejor.

Cuándo no conviene abusar

Registrar variables no sustituye el criterio de diseño del sistema.

Si una variable solo existe para reutilizar un valor estático, una custom property normal suele bastar.

Reserva `@property` para lo que gana de verdad con tipado o animación. Así el código sigue claro y el concepto conserva peso pedagógico.

CSS
48

@property: custom properties tipadas y animables

Aprende a registrar variables CSS con `@property` para que el navegador entienda su tipo real y pueda animarlas de forma fiable en gradientes, barras, ángulos y temas dinámicos.

Test de Desarrollo Web (CulTest)

Código del tema: @property --angle { syntax: "<angle>"; }

📘 Teoría

Qué cambia cuando registras una variable

No es una nueva forma de declarar tokens; es una forma de volverlos entendibles para el motor de estilos.

Sin registro, dos valores como `0deg` y `360deg` viven dentro de una cadena. El navegador no siempre puede construir una transición suave entre ambos.

Con `@property`, la variable tiene tipo. Entonces sí puede interpolar y validar, igual que hace con propiedades nativas.

  • Sintaxis: define el tipo esperado, por ejemplo `` o ``.
  • inherits: decide si el valor viaja por herencia.
  • initial-value: evita estados ambiguos cuando nadie ha escrito la variable todavía.

Registro mínimo viable

La forma más útil de aprenderlo es con un caso que luego puedas animar.

Registrar un ángulo
@property --angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.ring {
  background: conic-gradient(from var(--angle), #7c3aed, #22c55e);
}

Patrones donde realmente luce

No hace falta usarlo en todos los tokens del sistema. Sí en los que quieras animar o validar mejor.

1

Gradientes y ángulos

Con `` puedes rotar conic gradients o direcciones sin reescribir toda la declaración.

2

Progreso y métricas

Con `` una barra, un gráfico radial o un relleno parcial ganan animación nativa y legible.

3

Temas dinámicos

Con `` o `` puedes hacer variaciones más ricas sobre hue, contraste o intensidad visual.

Cuándo no conviene abusar

Registrar variables no sustituye el criterio de diseño del sistema.

1

Si una variable solo existe para reutilizar un valor estático, una custom property normal suele bastar.

2

Reserva `@property` para lo que gana de verdad con tipado o animación. Así el código sigue claro y el concepto conserva peso pedagógico.

🧪 Aprende probando

Ejemplo Demo interactiva: tres tipos registrados Explora cómo `@property` desbloquea un cambio de tono, una rotación angular y una barra de progreso sin JavaScript.
⌄

🏁 Retos

Reto Reto: registrar una barra de carga Convierte `--progress` en una variable de porcentaje y úsala para animar el relleno.
⌄

🧰 Recursos

Enlaces útiles

MDN - @property MDN - Using CSS custom properties
Test

Comprueba tus conocimientos con un test sobre CSS.

Test de CSS
Recursos del curso 78
📘 Glosario 🎧 Audios 📄 PDFs 🖼️ Infografías 🎬 Vídeos 🔗 Enlaces 🧠 Flashcards 🧩 Snippets
‹
Lección 47
Animaciones CSS: transiciones, keyframes y micro-interacciones
Lección 49
interpolate-size: animar height auto sin hacks
›

¿Qué es esto?

Soy Cristian Eslava y a veces hago webs para procrastinar yo y vosotros 😉.

Esta la hice en febrero de 2026 para facilitar el aprendizaje de mis alumnxs. Aprender desarrollo web practicando. La idea es que crezca semanalmente con nuevos temas, tests y retos.

Inspirado en MDN, en W3Schools, en Codepen, en el crack de Manz y en mil sitios de documentación sobre desarrollo web. Quería aportar además de bloques teóricos con ejemplos, la gamificación de los retos y el sistema de test que ya tenía en culTest .

Si te gustó, si no te gustó, si quieres saludarme, o invitarme a 🍻 no dudes en escribirme en cristianeslava@gmail.com .