6XC

Seletor de Cursores CSS

Passe o mouse sobre cada valor de CSS cursor para testá-lo ao vivo, clique para copiar a declaração.

991 visualizações

Passe o mouse para testar · Clique para copiar

A propriedade cursor

O cursor indica ao usuário o que um elemento faz antes de clicar: pointer para itens clicáveis, grab para itens arrastáveis, not-allowed para áreas desativadas, col-resize/row-resize para painéis divisíveis. Passe o mouse sobre cada bloco abaixo para sentir o cursor na sua própria tela; clicar copia a declaração pronta. Também é possível usar imagens personalizadas com cursor: url(...), alternativa.

Perguntas Frequentes

Por que meu cursor personalizado não aparece?

Imagens de cursor personalizadas precisam ser pequenas (32×32 px ou menos na maioria das plataformas) e a declaração exige uma palavra-chave de fallback: cursor: url("c.png"), auto;.

Os botões devem usar cursor: pointer?

Os navegadores não aplicam isso por padrão em <button>, mas os usuários esperam — a maioria dos design systems adiciona cursor: pointer a todos os controles interativos.

Ferramentas Semelhantes

Gerador de Gradiente CSS Crie gradientes CSS lineares, radiais e cônicos com pré-visualização ao vivo e copie o código. Gerar Gerador de Sombra CSS (Box Shadow) Desenhe uma box-shadow visualmente — deslocamentos, desfoque, expansão, cor, opacidade e inset — com pré-visualização em tempo real. Gerar Gerador de Border Radius CSS Arredonde cada canto individualmente ou todos de uma vez, em px ou %, com pré-visualização ao vivo e CSS copiável. Gerar Gerador de Sombra de Texto CSS Crie um text-shadow com deslocamentos, desfoque, cor e opacidade — pré-visualização ao vivo em texto de exemplo. Gerar