Crear y aplicar cursores personalizados usando CSS e imágenes

Los cursores personalizados te permiten adaptar la experiencia del usuario con indicaciones visuales que coinciden con tu marca u objetivos creativos. Ya sea un icono dibujado a mano, un puntero de estilo de juego o simplemente una variación divertida de la flecha predeterminada, crear un cursor personalizado con CSS es más fácil de lo que parece. Esta guía te muestra cómo hacerlo paso a paso.

Sintaxis básica de la propiedad CSS cursor

CSS proporciona una variedad de tipos de cursores integrados. Así es como se utilizan:

.default {
  cursor: default;
}
.pointer {
  cursor: pointer;
}
.text {
  cursor: text;
}
.help {
  cursor: help;
}
.progress {
  cursor: progress;
}

Estas opciones integradas cubren interacciones estándar. Pero para ir más allá, puedes usar tu propia imagen.

Creando un cursor personalizado a partir de una imagen

Para usar una imagen como cursor, puedes pasar una URL a la propiedad cursor.

Ejemplo:

.custom-cursor {
  cursor: url('cursor.png') 4 4, auto;
}

• url('cursor.png') es tu imagen personalizada
• 4 4 es el punto activo (donde se registra el clic)
• auto es el cursor de respaldo si la imagen no se carga

Formatos soportados

• .cur y .ico (funcionan mejor en Windows y Edge)
• .png (funciona ampliamente, pero puede ignorar puntos activos en algunos navegadores)
• .svg (menos compatible para cursores)

Tamaño recomendado

• Mantente en 32x32 píxeles o menos para un comportamiento consistente
• Las imágenes mayores de 128x128 podrían ser ignoradas o escaladas de manera inconsistente

Cursor solo al pasar el ratón

Para mostrar un cursor personalizado solo cuando se pasa el ratón sobre elementos específicos:

.button:hover {
  cursor: url('hover-cursor.png'), pointer;
}

Esto mantiene el cursor predeterminado en otros lugares y personaliza la retroalimentación de interacción.

Consejos de alineación y compatibilidad de cursores

• Los valores de punto activo son cruciales — definen el punto activo del cursor.
• Las alternativas de respaldo aseguran una degradación elegante.
• Las pruebas en Chrome, Firefox, Safari y Edge son esenciales.

.cursor-test {
  cursor: url('cursor.png') 16 0, auto;
}

Utiliza herramientas como las herramientas de desarrollo del navegador o editores de imágenes para determinar las coordenadas adecuadas del punto activo.

Consejo adicional: Evita cursores borrosos

Algunos navegadores escalan los cursores PNG si no son perfectos a nivel de píxel. Para evitar el renderizado borroso:

• Usa una resolución exacta 1:1 (por ejemplo, 32x32)
• Evita el relleno transparente en tus imágenes de cursor

Cursores animados personalizados (opcional)

Los cursores animados no son compatibles de forma nativa, pero hay dos soluciones comunes:

1. Usar un GIF

.cursor-gif {
  cursor: url('animated-cursor.gif'), auto;
}

• Funciona en algunos navegadores, pero no de manera consistente.
• El GIF puede parpadear o ser ignorado.

2. Usar JavaScript para seguir el ratón

const cursor = document.querySelector('.cursor');
document.addEventListener('mousemove', e => {
  cursor.style.left = e.pageX + 'px';
  cursor.style.top = e.pageY + 'px';
});

Luego estiliza el div .cursor:

.cursor {
  position: fixed;
  pointer-events: none;
  width: 32px;
  height: 32px;
  background-image: url('custom.png');
  background-size: cover;
  z-index: 9999;
}

Casos de uso para cursores animados

• Juegos e interfaces lúdicas
• Sitios web creativos personalizados o portafolios

Consideraciones de accesibilidad y experiencia de usuario

Los cursores personalizados deben mejorar, no obstaculizar, la usabilidad. Ten en cuenta:

• Evita reemplazar cursores en inputs y enlaces a menos que añada claridad
• Asegúrate de que los diseños visuales no interfieran con el comportamiento esperado del puntero
• Usa puntos activos claros para evitar desajustes en los clics

Mejores prácticas

• Prueba con usuarios de teclado y lectores de pantalla
• Mantén los cursores visualmente distintos y ligeros
• Evita aplicar cursores globalmente (por ejemplo, al body) a menos que tenga sentido contextualmente

Problemas comunes y depuración

¿El cursor no se muestra?

• Confirma que la ruta de la imagen sea correcta
• Usa formatos y dimensiones compatibles
• Añade una alternativa: cursor: url(...), auto;

¿Punto activo desalineado?

• Ajusta las coordenadas X e Y en el valor cursor
• Previsualiza en un editor de imágenes para determinar el punto exacto de clic

¿No funciona en Firefox o Safari?

• Intenta usar .cur o .ico en lugar de .png
• Evita formatos SVG y animados para interacciones críticas
• Safari ignora algunos formatos de cursor de imagen por completo

Aplicando al elemento incorrecto

Si tu cursor no es visible, asegúrate de que el CSS se aplique al elemento visible e interactivo. Por ejemplo:

body {
  cursor: url('cursor.png'), default;
}

Conclusión

Los cursores personalizados pueden añadir pulido y diversión a tu interfaz de usuario, pero vienen con peculiaridades de los navegadores. Mantente con formatos bien soportados, prueba en diferentes navegadores y siempre incluye una alternativa para garantizar la usabilidad. Usa cursores personalizados selectivamente donde mejoren la claridad o refuercen la marca, y evita el uso excesivo donde puedan confundir a los usuarios.

Preguntas frecuentes