Validación HTML: CSS: "clip-path": X no es un valor válido para "clip-path".

Acerca de este problema HTML

La propiedad clip-path define una región de recorte que controla qué partes de un elemento son visibles. Acepta un conjunto específico de tipos de valores, y cualquier desviación de la sintaxis esperada activará un error de validación. El validador verifica tu CSS contra la especificación y marca los valores que no se ajustan.

Los tipos de valores aceptados para clip-path son:

none — Sin recorte (por defecto).
Funciones de forma básica — inset(), circle(), ellipse(), polygon(), y path().
Referencia url() — Apunta a un elemento SVG <clipPath>, ej., url(#myClip).
Palabras clave geometry-box — border-box, padding-box, content-box, margin-box, fill-box, stroke-box, view-box. Estas pueden usarse solas o combinadas con una forma básica.

Aquí tienes los errores más comunes que causan este error:

Unidades faltantes en valores de longitud. Escribir circle(50 at 50% 50%) es inválido porque 50 necesita una unidad como px, em, o %. El valor 0 es la única longitud que no requiere una unidad.
Separadores incorrectos. En circle() y ellipse(), las coordenadas de posición después de at deben separarse por espacios, no comas. En polygon(), cada par de coordenadas usa un espacio entre x e y, mientras que las comas separan los puntos entre sí.
Datos de path() malformados. La cadena de ruta SVG dentro de path() debe estar envuelta en comillas, ej., path("M0 0 L100 0 L100 100 Z").
Errores tipográficos o funciones no compatibles. Usar un nombre de función que la especificación no define, o escribir mal uno como cirlce(), activará el error.
polygon() fill-rule inválido. Si especificas una regla de relleno en polygon(), debe ser nonzero o evenodd, seguido de una coma antes del primer punto.

Obtener la sintaxis correcta de clip-path importa para el cumplimiento de estándares y la consistencia entre navegadores. Los navegadores pueden ignorar silenciosamente un valor clip-path inválido, lo que significa que tu efecto visual previsto simplemente no aparecerá — y podrías no darte cuenta del porqué. Validar tu CSS detecta estos problemas temprano.

Aquí tienes una referencia rápida para la sintaxis correcta de cada función de forma básica:

circle(<radius> at <cx> <cy>) — El radio es una longitud o porcentaje. La posición usa espacios, no comas.
ellipse(<rx> <ry> at <cx> <cy>) — Ambos radios son longitudes o porcentajes.
inset(<top> <right> <bottom> <left> round <border-radius>) — Los desplazamientos son longitudes o porcentajes. La palabra clave round y border-radius son opcionales.
polygon([<fill-rule>,] <x1> <y1>, <x2> <y2>, ...) — Espacio entre x e y dentro de un punto; coma entre puntos.
path("<SVG path data>") — La cadena de datos de ruta debe estar entre comillas.

Ejemplos

Valores `clip-path` inválidos

<style>
  /* Inválido: radio sin unidad; coma entre coordenadas de posición */
  .clip-a {
    clip-path: circle(50 at 50%, 50%);
  }

  /* Inválido: comas entre x e y dentro de cada punto */
  .clip-b {
    clip-path: polygon(0%, 0%, 100%, 0%, 100%, 100%, 0%, 100%);
  }

  /* Inválido: datos de ruta no envueltos en comillas */
  .clip-c {
    clip-path: path(M0 0 L100 0 L100 100 Z);
  }

  /* Inválido: nombre de función mal escrito */
  .clip-d {
    clip-path: cirlce(50% at 50% 50%);
  }
</style>

Valores `clip-path` válidos

<style>
  /* Círculo válido: el radio tiene una unidad; la posición usa espacios */
  .clip-a {
    clip-path: circle(50px at 50% 50%);
  }

  /* Polígono válido: espacio entre x e y, comas entre puntos */
  .clip-b {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }

  /* Ruta válida: datos SVG entre comillas */
  .clip-c {
    clip-path: path("M0 0 L100 0 L100 100 Z");
  }

  /* Inset válido con esquinas redondeadas */
  .clip-d {
    clip-path: inset(10% 20% 10% 20% round 8px);
  }

  /* Palabra clave geometry-box válida combinada con una forma */
  .clip-e {
    clip-path: padding-box circle(50% at 50% 50%);
  }

  /* Válido: referenciando un clipPath SVG */
  .clip-f {
    clip-path: url(#roundClip);
  }
</style>

Ejemplo completo con referencia SVG `<clipPath>`

<!doctype html>
<html lang="en">
<head>
  <title>Valid clip-path with SVG reference</title>
  <style>
    .clipped {
      clip-path: url(#roundClip);
      width: 200px;
      height: 200px;
      background: coral;
    }
  </style>
</head>
<body>
  <svg width="0" height="0" aria-hidden="true">
    <clipPath id="roundClip" clipPathUnits="objectBoundingBox">
      <circle cx="0.5" cy="0.5" r="0.5"></circle>
    </clipPath>
  </svg>
  <div class="clipped">Clipped element</div>
</body>
</html>

Cuando te encuentres con este error de validación, revisa cuidadosamente el valor reportado en el mensaje de error. Compáralo contra la sintaxis aceptada para la función que estás usando, prestando especial atención a las unidades, separadores, y comillas. Las pequeñas diferencias de sintaxis — una coma donde debería haber un espacio, o una unidad faltante — son los culpables más frecuentes.