Visor de cursores CSS
Visualice cada estado aceptable para los cursores del navegador. ¡Pase el mouse para experimentar, haga clic para copiar!
Para previsualizar los tipos de cursor CSS, pase el ratón por cualquier tarjeta de cursor para verlo en directo y haga clic en ella para copiar su declaración cursor, como cursor: pointer;.
Last updated:
Visor de cursores CSS. Visualice cada estado aceptable para los cursores del navegador. ¡Pase el mouse para experimentar, haga clic para copiar!
Descubra y pruebe instantáneamente cada estilo de cursor de navegador disponible con nuestro visor de cursores CSS en línea gratuito. Esta utilidad de diseño de interfaz de usuario premium aprovecha las API nativas del navegador.
Para obtener mejores resultados, revise la salida antes de copiarla o descargarla, especialmente si se reutilizará en código, informes, documentación o archivos compartidos.
Este flujo en el navegador mantiene la tarea rápida y evita limpiezas manuales en aplicaciones separadas. Herramientas relacionadas: Continúe el flujo con Analizador de URL, Codificador y decodificador de URL, Extractor de URL / Dominio.
Estas herramientas relacionadas ayudan con tareas cercanas de conversión, formato, validación, generación y limpieza.
Preguntas frecuentes
¿Cómo pruebo y copio un valor de cursor CSS?
Pase el ratón por una tarjeta para ver ese cursor; el nombre de la tarjeta es el valor CSS. Haga clic en la tarjeta (o pulse Intro) para seleccionarla y copiar su declaración, por ejemplo cursor: grab;. El panel Cursor seleccionado muestra una descripción, una zona de prueba y un botón Copiar CSS.
¿Qué cursor CSS muestra la mano?
Use cursor: pointer; para enlaces y elementos clicables; muestra la mano. Use grab y grabbing para elementos arrastrables, not-allowed para controles deshabilitados, text para el cursor en forma de I, y wait o progress para estados de espera.
¿Cómo encuentro rápidamente un tipo de cursor?
Escriba en el cuadro de búsqueda para filtrar por nombre o descripción, por ejemplo arrastrar, resize o zoom, o use los botones de categoría: General, Enlaces y estado, Selección, Arrastrar y soltar, Redimensionar y desplazar y Zoom. El contador indica cuántos de los 36 cursores coinciden.
¿Cómo creo un cursor personalizado con una imagen?
En Generador de CSS para cursores personalizados, pegue la URL de una imagen o un data URI (PNG, SVG o CUR), indique si quiere Punto activo X y Punto activo Y en píxeles (de 0 a 127) y elija un Cursor de respaldo. La herramienta genera una regla como cursor: url("cursor.png") 16 16, pointer; que puede probar en la zona de vista previa y copiar.
¿Por qué no se muestra la imagen de mi cursor personalizado?
Los navegadores ignoran las imágenes de cursor mayores de 128 por 128 píxeles, así que 32 por 32 es el tamaño más seguro. La URL de la imagen también debe poder cargarse desde la página donde la usa. Cuando la imagen no se puede usar, se muestra en su lugar la palabra clave de respaldo.
¿Por qué algunos cursores se ven iguales o distintos en mi ordenador?
Las palabras clave de cursor las dibuja su sistema operativo, así que el mismo valor puede verse distinto en Windows, macOS y Linux, y algunos sistemas reutilizan una misma imagen para varios valores. Los dispositivos táctiles no muestran ningún cursor de ratón.
Cómo usar esta herramienta online
Con Visor de cursores CSS puede formatear, validar, convertir, decodificar, codificar, generar o revisar datos rápidamente en el navegador, sin abrir una aplicación pesada. Empiece con el campo de entrada o las opciones visibles, revise el resultado y copie o descargue la salida.
Procesamiento privado en el navegador
Visor de cursores CSS mantiene el procesamiento normal de forma local en su navegador. Esto ayuda con fragmentos de código, tokens, documentos, valores de configuración, textos y otros contenidos que no deberían enviarse a un servicio remoto sin necesidad.
Cuándo resulta útil
Use Visor de cursores CSS para tareas repetibles de desarrollo, documentación técnica, pruebas de QA, conversiones rápidas, depuración, limpieza de contenido y flujos internos de equipo. La página prioriza entradas claras, respuesta inmediata y una salida fácil de reutilizar.
Consejos prácticos
Antes de copiar el resultado, revise detalles como espacios, mayúsculas, nombres de archivo, codificación, estructura de tokens, saltos de línea o formato de salida. Estas comprobaciones reducen errores en código, informes, tickets, correos o notas técnicas.