¿Qué es un cursor personalizado?

Un cursor personalizado es un puntero de ratón definido por el usuario que reemplaza la flecha predeterminada del navegador o el icono de puntero. Los sitios web y las aplicaciones utilizan cursores personalizados para reforzar la marca, mejorar la inmersión en juegos o experiencias creativas, o simplemente añadir un toque visual único a una interfaz. Los cursores personalizados se definen típicamente en CSS usando la propiedad cursor con un valor url() que apunta a un archivo de imagen como .cur, .png o .svg.

Los navegadores web admiten varios formatos de archivo de cursor de forma nativa. El formato .cur es el formato clásico de cursor de Windows, .ani añade soporte de animación, mientras que .png y .svg ofrecen alternativas modernas e independientes de la resolución que funcionan en todas las plataformas.

Descripción de la herramienta

El Probador de Cursor Personalizado te permite cargar cualquier archivo de cursor y obtener una vista previa instantánea de cómo se ve y se comporta en el navegador. Una vez cargado, tu cursor reemplaza el puntero predeterminado dentro de un área de prueba dedicada — una ventana gráfica con patrón de cuadrícula y un botón — para que puedas evaluar tanto el movimiento en espacio libre como el comportamiento al pasar el ratón sin escribir ni una sola línea de CSS.

Formatos admitidos

Formato Descripción
.cur Formato de cursor de Windows, ampliamente compatible
.ani Cursor de Windows animado
.png Imagen rasterizada, ideal para cursores de alta calidad
.svg Imagen vectorial escalable, nítida en cualquier tamaño
.ico Formato de icono de Windows, también utilizable como cursor

Características

  • Vista previa instantánea: El cursor se aplica en directo tan pronto como se carga el archivo — no se necesita recargar la página
  • Área de prueba interactiva: La ventana gráfica con patrón de cuadrícula muestra el cursor sobre un fondo neutro para una visibilidad clara
  • Botón de prueba: Un botón dentro del área de prueba te permite verificar el comportamiento del cursor en elementos interactivos
  • Herencia de cursor consistente: El botón hereda el cursor personalizado en lugar de revertir al predeterminado del navegador
  • Solo del lado del cliente: Los archivos se leen directamente en el navegador y nunca se cargan en ningún servidor

Casos de uso

  • Diseñadores de cursores: Verifica cómo se ve un archivo de cursor .cur o .png recién creado antes de distribuirlo
  • Desarrolladores web: Prueba rápidamente un archivo de cursor antes de integrarlo en CSS con la propiedad cursor: url(...)
  • Desarrolladores de juegos y creativos: Comprueba la sensación y visibilidad de punteros personalizados en contextos de interfaz de usuario interactiva

Cómo funciona

Cuando cargas un archivo, la herramienta crea una URL de objeto para él usando la API URL.createObjectURL() del navegador e la inyecta como un estilo CSS cursor en el área de prueba. Esto es equivalente a escribir cursor: url(tu-archivo.cur), auto en una hoja de estilos. El fallback auto asegura que el navegador use su cursor predeterminado si el archivo no puede ser cargado o analizado.

Consejos

  • Para cursores .png, el navegador utiliza la esquina superior izquierda (0 0) como punto activo por defecto. Si el punto activo de tu cursor debe estar en otro lugar (por ejemplo, la punta de un lápiz), es posible que tengas que ajustarlo en tu CSS después de hacer la prueba.
  • Los cursores animados .ani se reproducen automáticamente en navegadores que los admiten (principalmente basados en Chromium).
  • Los cursores SVG deben ser pequeños (típicamente menos de 128×128 px) para renderizarse correctamente como cursores en la mayoría de navegadores.