O que é um cursor personalizado?

Um cursor personalizado é um ponteiro do mouse definido pelo usuário que substitui a seta padrão ou ícone de ponteiro do navegador. Sites e aplicações usam cursores personalizados para reforçar a marca, melhorar a imersão em jogos ou experiências criativas, ou simplesmente adicionar um toque visual único a uma interface. Cursores personalizados são normalmente definidos em CSS usando a propriedade cursor com um valor url() apontando para um arquivo de imagem como .cur, .png ou .svg.

Os navegadores web suportam nativamente vários formatos de arquivo de cursor. O formato .cur é o formato clássico de cursor do Windows, .ani adiciona suporte a animação, enquanto .png e .svg oferecem alternativas modernas e independentes de resolução que funcionam em todas as plataformas.

Descrição da ferramenta

O Testador de Cursor Personalizado permite que você carregue qualquer arquivo de cursor e visualize instantaneamente como ele se parece e se comporta no navegador. Após o carregamento, seu cursor substitui o ponteiro padrão dentro de uma área de teste dedicada — uma viewport com padrão xadrez e um botão — para que você possa avaliar tanto o movimento em espaço livre quanto o comportamento ao passar o mouse sem escrever uma única linha de CSS.

Formatos suportados

Formato Descrição
.cur Formato de cursor do Windows, amplamente suportado
.ani Cursor animado do Windows
.png Imagem raster, ideal para cursores de alta qualidade
.svg Imagem vetorial escalável, nítida em qualquer tamanho
.ico Formato de ícone do Windows, também utilizável como cursor

Recursos

  • Visualização instantânea: O cursor é aplicado em tempo real assim que o arquivo é carregado — sem necessidade de recarregar a página
  • Área de teste interativa: A viewport com padrão xadrez mostra o cursor sobre um fundo neutro para visibilidade clara
  • Alvo de teste com botão: Um botão dentro da área de teste permite verificar o comportamento do cursor em elementos interativos

Como funciona

Quando você carrega um arquivo, a ferramenta cria uma URL de objeto para ele usando a API URL.createObjectURL() do navegador e a injeta como um estilo CSS cursor na área de teste. Isso é equivalente a escrever cursor: url(seu-arquivo.cur), auto em uma folha de estilo. O fallback auto garante que o navegador use seu cursor padrão se o arquivo não puder ser carregado ou analisado.

Dicas

  • Para cursores .png, o navegador usa o canto superior esquerdo (0 0) como hotspot por padrão. Se o ponto ativo do seu cursor deve estar em outro lugar (por exemplo, a ponta de um lápis), você pode precisar ajustar isso em seu CSS após testar.
  • Cursores animados .ani são reproduzidos automaticamente em navegadores que os suportam (principalmente baseados em Chromium).
  • Cursores SVG devem ser pequenos (normalmente menos de 128×128 px) para renderizar corretamente como cursores na maioria dos navegadores.