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
  • Herança consistente do cursor: O botão herda o cursor personalizado em vez de reverter para o padrão do navegador
  • Apenas no lado do cliente: Os arquivos são lidos diretamente no navegador e nunca são carregados em nenhum servidor

Casos de uso

  • Designers de cursor: Verifique como um arquivo de cursor .cur ou .png recém-criado se parece antes de lançá-lo
  • Desenvolvedores web: Teste rapidamente um ativo de cursor antes de integrá-lo em CSS com a propriedade cursor: url(...)
  • Desenvolvedores de jogos e criadores: Verifique a sensação e visibilidade de ponteiros personalizados em contextos de UI interativa

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.