Visor de cursores CSS: prueba todos los tipos de cursor en directo
El visor de cursores CSS muestra los 36 valores de la propiedad CSS cursor, organizados según su uso y con el cursor real de tu sistema: pasa, por ejemplo, por not-allowed, verás el círculo tachado y podrás copiar cursor: not-allowed; con un clic. Gratis y sin registrarte; todo funciona en el navegador.
Creado por Justin Schuessler
¿Ya tienes el código listo? Publica tu sitio con un hosting web rápido y fiable.
Todos los valores de cursor según su uso
Uso
36 de 36 valores
La vista previa muestra el cursor tal como lo dibujan tu sistema operativo y tu navegador. Por eso, muchos cursores tienen un aspecto diferente en macOS, Windows y Linux.
General3
autoEl navegador decide qué cursor mostrar, por ejemplo, el cursor de texto sobre el texto y la flecha al lado. Es el valor predeterminado.
Mueve el ratón aquídefaultLa flecha normal, incluso sobre el texto. Para zonas en las que no se puede hacer clic.
Mueve el ratón aquínoneOculta el puntero del ratón, por ejemplo, en vídeos a pantalla completa, juegos o al usar un cursor personalizado.
Mueve el ratón aquí
Enlaces y estados5
pointerLa mano con el índice extendido para enlaces, botones y cualquier elemento en el que se pueda hacer clic.
Mueve el ratón aquíhelpSigno de interrogación junto a la flecha cuando hay ayuda disponible, por ejemplo, en un icono informativo con información emergente.
Mueve el ratón aquícontext-menuIndica que hay un menú contextual disponible, por ejemplo, en elementos con un menú propio al hacer clic derecho.
Mueve el ratón aquíprogressFlecha con icono de carga: algo se carga en segundo plano, pero la página sigue siendo utilizable.
Mueve el ratón aquíwaitIcono de carga sin flecha: la interfaz queda bloqueada hasta que finaliza la operación.
Mueve el ratón aquí
Selección4
textEl cursor de texto (en forma de I) para campos de entrada y texto seleccionable.
Mueve el ratón aquívertical-textEl cursor de texto horizontal para texto dispuesto en vertical, por ejemplo, con writing-mode: vertical-rl.
Mueve el ratón aquícellUna cruz gruesa para celdas seleccionables, como en una hoja de cálculo.
Mueve el ratón aquícrosshairPunto de mira para tareas de precisión, por ejemplo, en lienzos, cuentagotas o recortes de imagen.
Mueve el ratón aquí
Arrastrar y soltar7
grabMano abierta para elementos que se pueden arrastrar, como tarjetas, elementos de listas o controles deslizantes.
Mueve el ratón aquígrabbingMano cerrada mientras se arrastra un elemento.
Mueve el ratón aquímoveCruz de flechas para elementos que se pueden mover libremente, como ventanas o widgets.
Mueve el ratón aquícopyFlecha con signo más: al soltar el elemento se crea una copia, por ejemplo, al arrastrar archivos.
Mueve el ratón aquíaliasFlecha con icono de enlace: al soltar el elemento se crea un enlace o acceso directo.
Mueve el ratón aquíno-dropEl elemento arrastrado no se puede soltar aquí, por ejemplo, fuera de una zona de destino.
Mueve el ratón aquínot-allowedCírculo tachado para botones desactivados y acciones que no están permitidas en este momento.
Mueve el ratón aquí
Cambiar tamaño14
col-resizeCambia la anchura de las columnas, por ejemplo, en los separadores entre columnas de una tabla o entre vistas divididas.
Mueve el ratón aquírow-resizeCambia la altura de las filas, por ejemplo, en los separadores horizontales entre dos áreas.
Mueve el ratón aquín-resizeArrastra el borde superior para ampliar un elemento hacia arriba.
Mueve el ratón aquíe-resizeArrastra el borde derecho para ampliar un elemento hacia la derecha.
Mueve el ratón aquís-resizeArrastra el borde inferior para ampliar un elemento hacia abajo.
Mueve el ratón aquíw-resizeArrastra el borde izquierdo para ampliar un elemento hacia la izquierda.
Mueve el ratón aquíne-resizeArrastra la esquina superior derecha para cambiar la anchura y la altura.
Mueve el ratón aquínw-resizeArrastra la esquina superior izquierda para cambiar la anchura y la altura.
Mueve el ratón aquíse-resizeArrastra la esquina inferior derecha para cambiar la anchura y la altura.
Mueve el ratón aquísw-resizeArrastra la esquina inferior izquierda para cambiar la anchura y la altura.
Mueve el ratón aquíew-resizeCambia la anchura en ambas direcciones, por ejemplo, en un control deslizante horizontal o un separador.
Mueve el ratón aquíns-resizeCambia la altura en ambas direcciones, por ejemplo, en un separador vertical.
Mueve el ratón aquínesw-resizeArrastre diagonal de arriba a la derecha hacia abajo a la izquierda, por ejemplo, desde la esquina de un panel.
Mueve el ratón aquínwse-resizeArrastre diagonal de arriba a la izquierda hacia abajo a la derecha, por ejemplo, desde el tirador inferior derecho de un panel.
Mueve el ratón aquí
Desplazamiento y zoom3
all-scrollFlechas en todas las direcciones: el contenido se puede desplazar en cualquier dirección, como en un mapa.
Mueve el ratón aquízoom-inLupa con signo más para imágenes o mapas que se amplían al hacer clic.
Mueve el ratón aquízoom-outLupa con signo menos para imágenes ampliadas que se reducen al hacer clic.
Mueve el ratón aquí
Zona de prueba: cursores en acción
Pasa el ratón por los ejemplos, arrastra la tarjeta, el separador y la esquina del panel, y haz clic en la imagen.
Botón
pointerBotón desactivado
not-allowedEnlace de texto
Encontrarás más información en la Documentación.
pointerCampo de entrada
textTarjeta desplazable
Tarjeta
Arrastra para mover
grabgrabbingCambiar el ancho de las columnas
Columna A · 50 %Columna B · 50 %col-resizeArrastra la esquina del panel
Panel
160 × 80 px
nwse-resizeEstado de carga
Cargando en segundo plano
Puedes seguir trabajando.
Espera, por favor
La zona está bloqueada.
progresswaitImagen ampliable
zoom-inzoom-out
Vista general
¿Qué es la propiedad CSS cursor?
La propiedad CSS cursor determina qué puntero del ratón aparece al pasar sobre un elemento. Así indicas qué ocurre ahí: la mano de pointer indica que se puede hacer clic, el cursor de texto que se puede seleccionar texto y el círculo tachado de not-allowed que la acción está bloqueada. Si no se especifica, se usa auto y el navegador decide.
Sintaxis
Basta con una palabra clave por regla. Los estados como :disabled o :active tienen su propio cursor:
button {
cursor: pointer;
}
button:disabled {
cursor: not-allowed;
}
.card[draggable="true"] {
cursor: grab;
}
.card[draggable="true"]:active {
cursor: grabbing;
}Las clases de utilidad como cursor-pointer en Tailwind CSS aplican la misma declaración cursor: pointer;. La herramienta copia CSS puro, no clases.
36 valores estándar
La especificación CSS incluye 36 palabras clave, desde auto y pointer hasta los 14 cursores de cambio de tamaño. Esta herramienta las muestra todas, agrupadas por uso.
Se hereda
cursor se aplica al elemento y a todos sus elementos secundarios hasta que uno de ellos establece su propio valor. Por tanto, cursor: pointer en un contenedor también afecta al texto que contiene.
Lo dibuja el sistema
CSS solo determina qué cursor aparece. Su aspecto depende del sistema operativo y del navegador. Por eso se ve distinto en macOS, Windows y Linux.
No hace falta :hover
El cursor solo aparece mientras el ratón está sobre el elemento. Por eso, aplica cursor directamente al elemento: no necesitas una regla :hover aparte.
Tipos de cursor
Resumen de los 36 tipos de cursor CSS
La herramienta organiza los valores de la propiedad CSS cursor en seis grupos según su uso. Con el filtro de uso puedes mostrar solo un grupo.
General3
El valor estándar auto, la flecha normal default y none, que oculta el puntero del ratón.
autodefaultnone
Enlaces y estados5
La mano para elementos clicables, ayuda, menú contextual y los dos estados de carga progress y wait.
pointerhelpcontext-menuprogresswait
Selección4
Cursor de texto horizontal y vertical, signo más para celdas de tablas y retícula para trabajos de precisión.
textvertical-textcellcrosshair
Arrastrar y soltar7
Mano abierta y cerrada, flecha de movimiento y respuestas al soltar: copia, enlace, no se puede soltar y no permitido.
grabgrabbingmovecopyaliasno-dropnot-allowed
Cambiar tamaño14
14 cursores de redimensionamiento para bordes, esquinas, columnas y filas, desde n-resize hasta nwse-resize.
col-resizerow-resizen-resizee-resizes-resizew-resizene-resizenw-resizese-resizesw-resizeew-resizens-resizenesw-resizenwse-resize
Desplazamiento y zoom3
Desplazamiento en todas las direcciones y lupa con más o menos para imágenes y mapas.
all-scrollzoom-inzoom-out
Buenas prácticas
¿Cuándo conviene usar cada cursor CSS?
El cursor crea una expectativa para quien lo usa. Estas reglas ayudan a cumplirla.
pointer solo para elementos clicables
La mano indica que al hacer clic ocurrirá algo. Úsala en enlaces, botones y tarjetas en las que se pueda hacer clic, pero no en texto ni en áreas sin función.
not-allowed para estados desactivados
Un botón deshabilitado usa cursor: not-allowed. Atención: con pointer-events: none no aparece ese cursor, porque el elemento deja de detectar el ratón.
grab y grabbing para arrastrar
Los elementos que se pueden arrastrar muestran grab. Mientras los arrastras, cambia a grabbing, por ejemplo, mediante :active o una clase que establezca tu script.
text para campos de entrada y texto
Los campos de entrada ya muestran el cursor de texto. Usa text explícitamente solo donde el contenido se pueda seleccionar o editar de verdad.
progress en lugar de wait
Si algo se carga en segundo plano y la página sigue siendo usable, utiliza progress. Usa wait solo si la interfaz está realmente bloqueada.
none solo con un sustituto
Un puntero invisible confunde. cursor: none es adecuado para juegos, vídeos a pantalla completa o un cursor personalizado que sustituya al del sistema.
Cómo funciona
Cómo encontrar el cursor CSS adecuado
Tres pasos, sin registro ni instalación.
Paso 1
Buscar cursor
Busca por valor, uso —como resize o drag— o estado —como disabled—, o filtra por grupo.
Paso 2
Probar cursores
Pasa el ratón por la vista previa de una tarjeta o interactúa con los ejemplos de la zona de prueba para ver el cursor real de tu sistema.
Paso 3
Copiar declaración
Un clic en Copiar guarda exactamente la declaración en el portapapeles, p. ej., cursor: not-allowed;. Pégala en tu regla CSS.
Cursores personalizados
Definir un cursor personalizado con url()
En lugar de una palabra clave, puedes usar una imagen propia como cursor. Tras la URL de la imagen, puedes indicar las coordenadas del punto activo, es decir, el punto donde se hace clic. Al final siempre va una palabra clave de respaldo por si la imagen no carga.
.canvas {
cursor:
url("/cursors/pencil.svg") 2 30,
crosshair;
}PNG y SVG son formatos adecuados. Los navegadores solo muestran cursores personalizados de hasta 128 × 128 píxeles; lo habitual es 32 × 32. La imagen del cursor debe dejar claro el punto de clic.
Descubrir más
Más herramientas
Formateador de HTML y CSS online (mejora la presentación del código)
Formatea HTML y CSS online, aplica sangría y mejora su presentación con detección automática del idioma. Funciona íntegramente en el navegador, sin subir archivos.
Creado por Luca Stanek
Convertir SVG a PNG (SVG to PNG)
NuevoConvierte SVG a PNG: guarda gráficos vectoriales nítidos a cualquier tamaño como PNG, JPG o WebP, con fondo transparente y plantillas para favicon, emoji de Discord e icono de servidor de Minecraft. Funciona íntegramente en el navegador.
Creado por Luca Stanek
Selector de color
Convierte colores al instante entre HEX, RGB, HSL, HSV y CMYK, encuentra el color CSS con nombre más cercano y comprueba el contraste WCAG frente al blanco y el negro, todo en tu navegador.
Creado por Justin Schuessler
Comprobador de contraste
Calcula en tiempo real la relación de contraste WCAG entre dos colores y comprueba los niveles AA/AAA y los componentes de la interfaz, directamente en el navegador.
Creado por Justin Schuessler
Generador de esquemas de colores
Genera en directo esquemas de colores complementarios, análogos, triádicos y más a partir de un color base. No se guarda ni se transmite nada.
Creado por Justin Schuessler
Generador de favicons
Genera un conjunto completo de favicons a partir de cualquier imagen: favicon.ico, icono Apple Touch, iconos Android Chrome, site.webmanifest y un fragmento HTML listo para copiar. Todo desde el navegador.
Creado por Jakub Martyniak
FAQ
Preguntas frecuentes
Respuestas breves sobre la propiedad CSS cursor y esta herramienta.
36 palabras clave en seis grupos: General (auto, default, none), enlaces y estados (pointer, help, context-menu, progress, wait), selección (text, vertical-text, cell, crosshair), arrastrar y soltar (grab, grabbing, move, copy, alias, no-drop, not-allowed), 14 cursores de cambio de tamaño y desplazamiento y zoom (all-scroll, zoom-in, zoom-out). También puedes usar imágenes propias con url().
pointer sirve para todo lo que desencadena una acción al hacer clic: enlaces, botones, tarjetas o iconos clicables. Los enlaces ya muestran la mano de forma predeterminada; los botones, en muchos navegadores, no. No uses pointer en texto o áreas sin función. cursor: hand es un valor antiguo no estandarizado de las primeras versiones de Internet Explorer y, por eso, no figura entre los 36 valores de la herramienta. Para mostrar la mano, usa cursor: pointer;.
Aplica cursor: auto al elemento para que el navegador decida o cursor: default para mostrar la flecha normal. Como cursor se hereda, puedes anular el pointer del elemento padre directamente en el elemento hijo. Encontrarás ambos valores en el grupo General de la herramienta.
cursor: not-allowed muestra un círculo tachado. Si además aplicas pointer-events: none al botón desactivado, el cursor deja de aparecer porque el elemento ignora el ratón. En la zona de prueba verás el botón con not-allowed.
grab muestra una mano abierta sobre un elemento que se puede arrastrar; grabbing, una mano cerrada mientras lo arrastras. move muestra flechas en cruz y es adecuado para elementos que se pueden mover libremente, como ventanas o widgets.
progress muestra una flecha con un símbolo de carga: algo se carga en segundo plano, pero la página sigue siendo usable. wait muestra solo el símbolo de carga e indica que la interfaz está bloqueada. progress es adecuado para la mayoría de las cargas en la web.
Con cursor: url(cursor.svg) 2 30, crosshair; indicas una imagen y, opcionalmente, el punto activo; después siempre va una palabra clave de respaldo. Los navegadores solo muestran cursores personalizados de hasta 128 × 128 píxeles. Esta herramienta muestra los 36 valores estándar; aquí no puedes subir imágenes propias.
CSS solo determina qué cursor aparece. El sistema operativo y el navegador lo dibujan, por eso varía entre macOS, Windows y Linux. Los dispositivos táctiles no tienen puntero: en ellos, la herramienta muestra una lista con descripciones y botones para copiar. Todo funciona en el navegador, sin subir archivos.
¿Tienes más preguntas?
Contactar con soporteTu sitio web necesita un hosting fiable
Un VPS de ZAP-Hosting mantiene tu sitio online de forma fiable.
Sin configuración. Sin riesgos. En línea en segundos.
¿Buscas más herramientas? Ver todas las herramientas para desarrolladores
Fuente preferida en Google
