Construa e aplique cursores personalizados usando CSS e imagens

Cursores personalizados permitem adaptar a experiência do usuário com indicações visuais que combinam com sua marca ou objetivos criativos. Seja um ícone desenhado à mão, um ponteiro estilo jogo ou apenas uma variação divertida da seta padrão, criar um cursor personalizado com CSS é mais fácil do que parece. Este guia mostra como fazer isso passo a passo.

Sintaxe básica da propriedade CSS cursor

O CSS fornece uma variedade de tipos de cursores integrados. Veja como usá-los:

.default {
  cursor: default;
}
.pointer {
  cursor: pointer;
}
.text {
  cursor: text;
}
.help {
  cursor: help;
}
.progress {
  cursor: progress;
}

Essas opções integradas cobrem interações padrão. Mas para ir além, você pode usar sua própria imagem.

Criando um cursor personalizado a partir de uma imagem

Para usar uma imagem como cursor, você pode passar uma URL para a propriedade cursor.

Exemplo:

.custom-cursor {
  cursor: url('cursor.png') 4 4, auto;
}

• url('cursor.png') é sua imagem personalizada
• 4 4 é o hotspot (onde o clique é registrado)
• auto é o cursor de fallback se a imagem não carregar

Formatos suportados

• .cur e .ico (funcionam melhor no Windows e Edge)
• .png (funciona amplamente, mas pode ignorar hotspots em alguns navegadores)
• .svg (menos suportado para cursores)

Tamanho recomendado

• Mantenha-se em 32x32 pixels ou menor para comportamento consistente
• Imagens maiores que 128x128 podem ser ignoradas ou redimensionadas de forma inconsistente

Cursor apenas ao passar o mouse

Para mostrar um cursor personalizado apenas ao passar o mouse sobre elementos específicos:

.button:hover {
  cursor: url('hover-cursor.png'), pointer;
}

Isso mantém o cursor padrão em outros lugares e personaliza o feedback de interação.

Dicas de alinhamento e compatibilidade do cursor

• Valores de hotspot são cruciais — eles definem o ponto ativo do cursor.
• Fallbacks garantem degradação elegante.
• Testes em Chrome, Firefox, Safari e Edge são essenciais.

.cursor-test {
  cursor: url('cursor.png') 16 0, auto;
}

Use ferramentas como devtools do navegador ou editores de imagem para determinar as coordenadas corretas do hotspot.

Dica extra: Evite cursores borrados

Alguns navegadores escalonam cursores PNG se eles não forem pixel-perfect. Para evitar renderização borrada:

• Use resolução exata 1:1 (por exemplo, 32x32)
• Evite preenchimento transparente nas suas imagens de cursor

Cursores animados personalizados (opcional)

Cursores animados não são nativamente suportados, mas existem duas soluções comuns:

1. Use um GIF

.cursor-gif {
  cursor: url('animated-cursor.gif'), auto;
}

• Funciona em alguns navegadores, mas não é consistente.
• GIF pode piscar ou ser ignorado.

2. Use JavaScript para rastrear o mouse

const cursor = document.querySelector('.cursor');
document.addEventListener('mousemove', e => {
  cursor.style.left = e.pageX + 'px';
  cursor.style.top = e.pageY + 'px';
});

Em seguida, estilize a div .cursor:

.cursor {
  position: fixed;
  pointer-events: none;
  width: 32px;
  height: 32px;
  background-image: url('custom.png');
  background-size: cover;
  z-index: 9999;
}

Casos de uso para cursores animados

• Jogos e interfaces lúdicas
• Sites criativos personalizados ou portfólios

Considerações de acessibilidade e UX

Cursores personalizados devem melhorar — não dificultar — a usabilidade. Tenha em mente:

• Evite substituir cursores em inputs e links, a menos que isso adicione clareza
• Garanta que designs visuais não interfiram no comportamento esperado do ponteiro
• Use hotspots claros para evitar incompatibilidade de clique

Melhores práticas

• Teste com usuários de teclado e leitores de tela
• Mantenha os cursores visualmente distintos e leves
• Evite aplicar cursores globalmente (por exemplo, ao body), a menos que faça sentido contextualmente

Armadilhas comuns e depuração

Cursor não aparece?

• Confirme se o caminho da imagem está correto
• Use formatos e dimensões suportados
• Adicione um fallback: cursor: url(...), auto;

Hotspot desalinhado?

• Ajuste as coordenadas X e Y no valor do cursor
• Visualize em um editor de imagem para determinar o ponto exato de clique

Não funciona no Firefox ou Safari?

• Tente usar .cur ou .ico em vez de .png
• Evite formatos SVG e animados para interações críticas
• O Safari ignora completamente alguns formatos de cursor de imagem

Aplicando ao elemento errado

Se seu cursor não estiver visível, certifique-se de que o CSS está aplicado ao elemento visível e interativo. Por exemplo:

body {
  cursor: url('cursor.png'), default;
}

Conclusão

Cursores personalizados podem adicionar polimento e diversão à sua UI, mas vêm com peculiaridades de navegador. Mantenha-se em formatos bem suportados, teste em diferentes navegadores e sempre inclua um fallback para garantir a usabilidade. Use cursores personalizados seletivamente onde eles melhoram a clareza ou reforçam a marca, e evite o uso excessivo onde possam confundir os usuários.

FAQs