Probador de Cursores CSS

• Previsualización instantánea de cursores CSS: previsualiza los 38 estilos de cursor CSS estándar pasando el ratón por cada tarjeta del probador. El cursor cambia al instante al pasar el ratón: sin clics, sin esperas y sin adivinar cómo se ve cada cursor en tu plataforma.
• Probador de cursores CSS en línea y seguro: el probador se ejecuta por completo en tu navegador, sin recogida de datos, sin seguimiento y sin peticiones al servidor. Es una herramienta de referencia puramente del lado del cliente: tu navegación es totalmente privada.
• Probador de cursores CSS sin instalación: usa el probador directamente en cualquier navegador moderno, sin descargas, complementos ni extensiones. Los cursores se renderizan con el conjunto nativo de tu sistema operativo, así que ves exactamente lo que verán tus usuarios.
• 100 % gratis con copia en un clic: el probador de cursores CSS es totalmente gratis, sin registro, sin límites de uso y sin anuncios. Haz clic en cualquier tarjeta de cursor para copiar la declaración CSS lista para usar al portapapeles al instante.

• Elegir el cursor adecuado para elementos de interfaz: usa el probador para encontrar el cursor correcto para botones, enlaces, elementos arrastrables y controles deshabilitados. Pasa el ratón por cada cursor en el probador para ver exactamente cómo queda antes de añadirlo a tu hoja de estilos.
• Diseño de interfaces de arrastrar y soltar: las interfaces de arrastrar y soltar requieren una retroalimentación precisa del cursor: grab al pasar por encima, grabbing al arrastrar y no-drop sobre destinos no válidos. El probador te permite previsualizar todos los cursores de arrastre en paralelo.
• Componentes de paneles redimensionables y divisores: los paneles redimensionables necesitan cursores de redimensionado direccional (ew-resize, ns-resize, col-resize, row-resize). Usa el probador para previsualizar todas las variantes y elegir la correcta para cada tirador de redimensionado.
• Accesibilidad y retroalimentación de UX: la retroalimentación correcta del cursor es un requisito de accesibilidad: los usuarios dependen de los cambios de cursor para entender qué es interactivo. El probador te ayuda a verificar que los elementos deshabilitados usan not-allowed y los estados de carga usan wait o progress.
• Verificación de cursores entre plataformas: los cursores CSS se renderizan de forma distinta en Windows, macOS y Linux. Usa el probador en cada plataforma para verificar que el cursor elegido se ve correcto para tu público objetivo antes de publicar.
• Revisión de código y documentación: al revisar código CSS o escribir documentación de componentes, usa el probador como referencia rápida para verificar que los valores de cursor son correctos y adecuados para la interacción descrita.

La propiedad CSS cursor establece la forma del cursor del ratón que aparece cuando el usuario pasa por encima de un elemento. Es una de las señales de UX más importantes en las interfaces web: el cursor comunica a los usuarios qué ocurrirá al interactuar con un elemento. La especificación CSS define 38 valores de cursor estándar organizados en categorías: cursores generales, indicadores de enlace y estado, cursores de selección, cursores de arrastrar y soltar, cursores de redimensionado y cursores de zoom. Nuestro probador de cursores CSS te permite previsualizarlos todos usando el renderizado nativo de cursores de tu sistema operativo, así que ves exactamente lo que verán tus usuarios en su plataforma.

1. Explora o busca: usa las pestañas de categoría para filtrar cursores por tipo (General, Enlaces y estado, Selección, Arrastrar y soltar, Redimensionar, Zoom), o escribe un nombre o descripción de cursor en el cuadro de búsqueda. El probador actualiza la cuadrícula al instante.
2. Pasa el ratón para previsualizar: mueve el ratón sobre cualquier tarjeta de cursor para ver el cursor cambiar en tiempo real. La barra de información inferior muestra el nombre del cursor, la declaración CSS y la descripción. El probador usa el renderizado nativo de cursores de tu navegador: no se usan imágenes ni SVG.
3. Haz clic para copiar: haz clic en cualquier tarjeta de cursor para copiar la declaración CSS completa (por ejemplo, cursor: pointer; ) al portapapeles. Pégala directamente en tu hoja de estilos. La tarjeta muestra una confirmación de «¡Copiado!» durante 1,5 segundos.

• General: auto (el navegador decide), default (flecha de la plataforma) y none (cursor oculto). Usa auto para la mayoría de elementos y sobreescribe solo donde sea necesario.
• Enlaces y estado: pointer para elementos clicables, wait para operaciones bloqueantes, progress para operaciones en segundo plano, help para disparadores de información y context-menu para objetivos de clic derecho.
• Arrastrar y soltar: grab y grabbing para elementos arrastrables, move para elementos móviles, copy para operaciones de copia, alias para accesos directos, no-drop y not-allowed para objetivos no válidos y acciones deshabilitadas.
• Redimensionar: cursores de redimensionado direccional para las 8 direcciones de la brújula (n, s, e, w, ne, nw, se, sw) más variantes bidireccionales (ew-resize, ns-resize, nesw-resize, nwse-resize) y col-resize , row-resize y all-scroll para redimensionar tablas y paneles.

Los 38 valores de cursor CSS del probador son compatibles con Chrome, Firefox, Safari, Edge y Opera. La apariencia visual de cada cursor varía según el sistema operativo: Windows usa cursores Aero, macOS usa su propio conjunto y Linux usa el tema de cursores X11. Es intencionado: el navegador delega el renderizado del cursor al sistema operativo para que los cursores se sientan nativos en la plataforma del usuario. El cursor none oculta el cursor por completo: úsalo con cuidado y solo cuando proporciones un cursor personalizado por JavaScript, ya que ocultar el cursor sin reemplazo es un problema de accesibilidad.