Visualizador de cursores CSS: teste todos os tipos de cursor ao vivo
O visualizador de cursores CSS mostra os 36 valores da propriedade CSS cursor, organizados por finalidade e usando o ponteiro real do seu sistema. Você pode passar o mouse sobre not-allowed, por exemplo, ver o círculo riscado e copiar cursor: not-allowed; com um clique. Grátis, sem cadastro; tudo funciona no navegador.
Criado por Justin Schuessler
Código pronto? Coloque seu site no ar com hospedagem web rápida e confiável.
Todos os valores de cursor por finalidade
Finalidade
36 de 36 valores
A prévia mostra o cursor como seu sistema operacional e navegador o exibem. Por isso, muitos cursores têm aparências diferentes no macOS, Windows e Linux.
Geral3
autoO navegador escolhe automaticamente, por exemplo, o cursor de texto sobre o texto e a seta ao lado. Esse é o valor padrão.
Mova o mouse até aquidefaultA seta normal, inclusive sobre texto. Para áreas que não podem ser clicadas.
Mova o mouse até aquinoneOculta o ponteiro do mouse, por exemplo, em vídeos em tela cheia, jogos ou ao usar um cursor personalizado.
Mova o mouse até aqui
Links e status5
pointerMão com o indicador apontado para links, botões e outros elementos clicáveis.
Mova o mouse até aquihelpPonto de interrogação junto à seta quando há ajuda disponível, por exemplo, em um ícone de informações com dica de ferramenta.
Mova o mouse até aquicontext-menuIndica que há um menu de contexto disponível, por exemplo, para elementos com menu próprio ao clicar com o botão direito.
Mova o mouse até aquiprogressSeta com ícone de carregamento: algo está carregando em segundo plano, mas a página continua utilizável.
Mova o mouse até aquiwaitÍcone de carregamento sem seta: a interface fica bloqueada até a conclusão do processo.
Mova o mouse até aqui
Seleção4
textCursor de texto (em forma de I) para campos de entrada e texto selecionável.
Mova o mouse até aquivertical-textCursor de texto horizontal para texto na vertical, por exemplo, com writing-mode: vertical-rl.
Mova o mouse até aquicellSinal de mais grosso para células selecionáveis, como em uma planilha.
Mova o mouse até aquicrosshairMira para tarefas de precisão, como usar áreas de desenho, conta-gotas ou recortes de imagem.
Mova o mouse até aqui
Arrastar e soltar7
grabMão aberta para elementos que podem ser arrastados, como mapas, itens de lista ou controles deslizantes.
Mova o mouse até aquigrabbingMão fechada enquanto um elemento está sendo arrastado.
Mova o mouse até aquimoveSetas em cruz para elementos que podem ser movidos livremente, como janelas ou widgets.
Mova o mouse até aquicopySeta com sinal de mais: ao soltar, uma cópia é criada, por exemplo, ao arrastar arquivos.
Mova o mouse até aquialiasSeta com ícone de link: ao soltar, um link ou atalho é criado.
Mova o mouse até aquino-dropO elemento arrastado não pode ser solto aqui, por exemplo, fora de uma área de destino.
Mova o mouse até aquinot-allowedCírculo cortado para botões desativados e ações que não são permitidas no momento.
Mova o mouse até aqui
Redimensionar14
col-resizeAltera a largura de colunas, por exemplo, nas divisórias de colunas de uma tabela ou de visualizações divididas.
Mova o mouse até aquirow-resizeAltera a altura de linhas, por exemplo, em divisórias horizontais entre duas áreas.
Mova o mouse até aquin-resizeArraste a borda superior para ampliar um elemento para cima.
Mova o mouse até aquie-resizeArraste a borda direita para ampliar um elemento para a direita.
Mova o mouse até aquis-resizeArraste a borda inferior para ampliar um elemento para baixo.
Mova o mouse até aquiw-resizeArraste a borda esquerda para ampliar um elemento para a esquerda.
Mova o mouse até aquine-resizeArraste o canto superior direito para alterar a largura e a altura.
Mova o mouse até aquinw-resizeArraste o canto superior esquerdo para alterar a largura e a altura.
Mova o mouse até aquise-resizeArraste o canto inferior direito para alterar a largura e a altura.
Mova o mouse até aquisw-resizeArraste o canto inferior esquerdo para alterar a largura e a altura.
Mova o mouse até aquiew-resizeRedimensiona a largura nos dois sentidos, por exemplo, em um controle deslizante horizontal ou divisor.
Mova o mouse até aquins-resizeRedimensiona a altura nos dois sentidos, por exemplo, em um divisor vertical.
Mova o mouse até aquinesw-resizeArraste na diagonal do canto superior direito ao inferior esquerdo, por exemplo, pelo canto de um painel.
Mova o mouse até aquinwse-resizeArraste na diagonal do canto superior esquerdo ao inferior direito, por exemplo, pela alça no canto inferior direito de um painel.
Mova o mouse até aqui
Rolagem e zoom3
all-scrollSetas em todas as direções: o conteúdo pode ser rolado em qualquer direção, como em um mapa.
Mova o mouse até aquizoom-inLupa com sinal de mais para imagens ou mapas que podem ser ampliados com um clique.
Mova o mouse até aquizoom-outLupa com sinal de menos quando uma imagem ampliada pode ser reduzida com um clique.
Mova o mouse até aqui
Área de teste: cursor em ação
Passe o mouse sobre os exemplos, arraste o cartão, a divisória e o canto do painel e clique na imagem.
Botão
pointerBotão desativado
not-allowedLink de texto
Saiba mais na Documentação.
pointerCampo de entrada
textCartão arrastável
Cartão
Arraste para mover
grabgrabbingRedimensionar largura da coluna
Coluna A · 50 %Coluna B · 50 %col-resizeArraste o canto do painel
Painel
160 × 80 px
nwse-resizeEstado de carregamento
Carregando em segundo plano
Você pode continuar trabalhando.
Aguarde
A área está bloqueada.
progresswaitImagem com zoom
zoom-inzoom-out
Visão geral
O que é a propriedade CSS cursor?
A propriedade CSS cursor define qual ponteiro do mouse aparece quando ele está sobre um elemento. Assim, você indica o que pode ser feito ali: a mão de pointer indica que é clicável, o cursor de texto indica que o texto pode ser selecionado e o círculo cortado de not-allowed indica que está bloqueado. Sem um valor definido, vale auto, e o navegador decide.
Sintaxe
Uma palavra-chave por regra é suficiente. Estados como :disabled ou :active recebem seu próprio cursor:
button {
cursor: pointer;
}
button:disabled {
cursor: not-allowed;
}
.card[draggable="true"] {
cursor: grab;
}
.card[draggable="true"]:active {
cursor: grabbing;
}Classes utilitárias como cursor-pointer no Tailwind CSS definem a mesma declaração cursor: pointer;. A ferramenta copia CSS puro, não classes.
36 valores padrão
A especificação CSS define 36 palavras-chave, de auto e pointer até os 14 cursores de redimensionamento. Esta ferramenta mostra todas elas, organizadas por finalidade.
É herdada
cursor se aplica ao elemento e a todos os seus elementos filhos, até que um deles defina seu próprio valor. Portanto, cursor: pointer em um contêiner também afeta o texto dentro dele.
O sistema desenha
O CSS só define qual cursor aparece. A aparência dele depende do sistema operacional e do navegador. Por isso, ele é diferente no macOS, Windows e Linux.
Não precisa de :hover
O cursor só aparece enquanto o mouse está sobre o elemento. Por isso, defina cursor diretamente no elemento; não é necessária uma regra :hover específica.
Tipos de cursor
Visão geral dos 36 tipos de cursor CSS
A ferramenta organiza os valores da propriedade CSS cursor em seis grupos por finalidade. Use o filtro de finalidade para exibir apenas um grupo.
Geral3
O valor padrão auto, a seta comum default e none, que oculta o ponteiro do mouse.
autodefaultnone
Links e status5
A mão para elementos clicáveis, ajuda, menu de contexto e os dois estados de carregamento progress e wait.
pointerhelpcontext-menuprogresswait
Seleção4
Cursor de texto horizontal e vertical, sinal de mais para células de tabela e mira para trabalhos de precisão.
textvertical-textcellcrosshair
Arrastar e soltar7
Mão aberta e fechada, seta de movimentação e indicadores ao soltar: copiar, criar link, não é possível soltar, não permitido.
grabgrabbingmovecopyaliasno-dropnot-allowed
Redimensionar14
14 cursores de redimensionamento para bordas, cantos, colunas e linhas, de n-resize a nwse-resize.
col-resizerow-resizen-resizee-resizes-resizew-resizene-resizenw-resizese-resizesw-resizeew-resizens-resizenesw-resizenwse-resize
Rolagem e zoom3
Rolagem em todas as direções e lupa com mais ou menos para imagens e mapas.
all-scrollzoom-inzoom-out
Boas práticas
Qual cursor CSS usar em cada situação?
O cursor cria uma expectativa para o usuário. Estas regras ajudam a cumpri-la.
pointer apenas para elementos clicáveis
A mão indica que um clique faz algo acontecer. Use-a em links, botões e cartões clicáveis, mas não em textos ou áreas sem função.
not-allowed para estados desativados
Um botão desativado recebe cursor: not-allowed. Atenção: com pointer-events: none, nenhum cursor aparece, pois o elemento não detecta o mouse.
grab e grabbing para arrastar
Elementos que podem ser arrastados usam grab. Durante o arraste, o cursor muda para grabbing, por exemplo, com :active ou uma classe definida pelo seu script.
text para campos de entrada e textos
Os campos de entrada já têm o cursor de texto. Defina text manualmente apenas onde o conteúdo realmente pode ser selecionado ou editado.
progress em vez de wait
Se algo estiver carregando em segundo plano e a página continuar utilizável, use progress. Use wait apenas quando a interface estiver realmente bloqueada.
none apenas com substituto
Um ponteiro invisível confunde. cursor: none é adequado para jogos, vídeos em tela cheia ou um cursor personalizado que substitua o ponteiro do sistema.
Como funciona
Como encontrar o cursor CSS certo
Três passos, sem cadastro nem instalação.
Passo 1
Encontrar cursor
Busque por um valor, uma finalidade como resize ou drag, ou um estado como disabled; ou filtre por grupo.
Passo 2
Testar cursores
Passe o mouse sobre a área de prévia de um bloco ou interaja com os exemplos na área de teste para ver o cursor real do seu sistema.
Passo 3
Copiar declaração
Um clique em Copiar coloca exatamente a declaração na área de transferência, por exemplo, cursor: not-allowed;. Cole-a na sua regra CSS.
Cursores personalizados
Definir um cursor personalizado com url()
Em vez de uma palavra-chave, você pode usar uma imagem personalizada como cursor do mouse. Depois do endereço da imagem, você pode indicar as coordenadas do hotspot, ou seja, do ponto que clica. No final, sempre vem uma palavra-chave alternativa, caso a imagem não carregue.
.canvas {
cursor:
url("/cursors/pencil.svg") 2 30,
crosshair;
}PNG ou SVG são adequados. Os navegadores exibem cursores personalizados de até 128 × 128 pixels; o tamanho comum é 32 × 32. A imagem do cursor deve deixar claro onde fica o ponto de clique.
Descobrir mais
Mais ferramentas
Formatador de HTML e CSS online (organize seu código)
Formate, recue e organize HTML e CSS online, com detecção automática da linguagem. Funciona inteiramente no navegador, sem upload.
Criado por Luca Stanek
Converter SVG em PNG (SVG to PNG)
NovoConverta SVG em PNG: salve gráficos vetoriais nítidos em qualquer tamanho como PNG, JPG ou WebP, com fundo transparente e modelos para favicon, emoji do Discord e ícone de servidor do Minecraft. Tudo direto no navegador.
Criado por Luca Stanek
Seletor de cores
Converta cores em tempo real entre HEX, RGB, HSL, HSV e CMYK, encontre a cor CSS com nome mais próxima e verifique o contraste WCAG com preto/branco — tudo no navegador.
Criado por Justin Schuessler
Verificador de contraste
Calcule em tempo real a relação de contraste WCAG entre duas cores e verifique a conformidade com AA/AAA e os requisitos para componentes da interface — tudo no navegador.
Criado por Justin Schuessler
Gerador de esquemas de cores
Crie em tempo real esquemas de cores complementares, análogos, triádicos e outros a partir de uma cor base — nada é salvo ou transmitido.
Criado por Justin Schuessler
Gerador de favicons
Crie um conjunto completo de favicons a partir de qualquer imagem — favicon.ico, Apple-Touch-Icon, ícones Android-Chrome, site.webmanifest e um excerto HTML pronto para copiar — inteiramente no navegador.
Criado por Jakub Martyniak
FAQ
Perguntas frequentes
Respostas rápidas sobre a propriedade CSS cursor e esta ferramenta.
36 palavras-chave em seis grupos: Geral (auto, default, none), Links e status (pointer, help, context-menu, progress, wait), Seleção (text, vertical-text, cell, crosshair), Arrastar e soltar (grab, grabbing, move, copy, alias, no-drop, not-allowed), 14 cursores de redimensionamento e Rolagem e zoom (all-scroll, zoom-in, zoom-out). Também é possível usar imagens personalizadas com url().
pointer é adequado para tudo o que executa uma ação ao clicar: links, botões, cartões ou ícones clicáveis. Links já exibem a mão por padrão; botões, em muitos navegadores, não. Não use pointer em textos ou áreas sem função. cursor: hand é um valor antigo e não padronizado das primeiras versões do Internet Explorer, por isso não está entre os 36 valores da ferramenta. Para exibir a mão, use cursor: pointer;.
Defina cursor: auto no elemento para deixar o navegador decidir ou cursor: default para usar a seta comum. Como cursor é herdado, você pode substituir o pointer do elemento pai diretamente no elemento filho. Os dois valores estão no grupo Geral da ferramenta.
cursor: not-allowed, ou seja, o círculo com uma barra. Se você também definir pointer-events: none no botão desativado, o cursor deixará de aparecer, pois o elemento passará a ignorar o mouse. Na área de teste, você pode ver o botão com not-allowed.
grab é a mão aberta sobre um elemento arrastável; grabbing é a mão fechada durante o arraste. move mostra setas em cruz e serve para elementos que podem ser movidos livremente, como janelas ou widgets.
progress mostra uma seta com um indicador de carregamento: algo está carregando em segundo plano, mas a página continua utilizável. wait mostra apenas o indicador de carregamento e significa que a interface está bloqueada. Para a maioria dos carregamentos na web, progress é a melhor opção.
Com cursor: url(cursor.svg) 2 30, crosshair;, você indica uma imagem e, opcionalmente, o hotspot. Depois, sempre vem uma palavra-chave alternativa. Os navegadores só exibem cursores personalizados de até 128 × 128 pixels. Esta ferramenta mostra os 36 valores padrão; não é possível fazer upload de imagens personalizadas aqui.
O CSS apenas define qual cursor aparece. O sistema operacional e o navegador o desenham, por isso ele varia entre macOS, Windows e Linux. Dispositivos com tela sensível ao toque não têm cursor do mouse: neles, a ferramenta mostra uma lista com descrições e botões para copiar. Tudo funciona no navegador, sem upload.
Mais alguma pergunta?
Contatar o suporteSeu site precisa de hospedagem confiável
Um VPS da ZAP-Hosting mantém seu site online com confiabilidade.
Sem configuração. Sem riscos. Online em segundos.
Procurando mais ferramentas? Ver todas as ferramentas para desenvolvedores
Fonte preferida no Google
