Gerador de cursor CSS personalizado
Transforme um emoji ou uma imagem em cursor de mouse CSS, ajuste seu ponto de ancoragem (hotspot) e teste o resultado ao vivo antes de copiar o código. Processamento 100% local no seu navegador — nada é enviado a um servidor.
Como funciona
A propriedade CSS cursor aceita uma imagem (url(...)), um ponto de ancoragem opcional em pixels, e uma palavra-chave de reserva usada caso a imagem não possa ser carregada. Esta ferramenta codifica seu emoji ou sua imagem em data URL diretamente no navegador, e depois compõe a declaração CSS completa, pronta para colar na sua folha de estilo.
Para que serve o ponto de ancoragem (hotspot)?
O ponto de ancoragem define qual pixel da imagem corresponde exatamente à posição do clique. Para um cursor em forma de alvo ou seta, é comum posicionar a ancoragem no centro ou na ponta da imagem para que o clique ocorra no lugar visual correto.
Por que alguns navegadores ignoram meu cursor personalizado?
A maioria dos navegadores limita o tamanho dos cursores personalizados a cerca de 128 pixels e retorna ao cursor de reserva se a imagem for muito pesada ou estiver em um formato não suportado; priorize uma imagem quadrada leve (PNG ou SVG) e um tamanho razoável para um resultado confiável em todos os navegadores.
Nem sua imagem nem seu emoji são transmitidos a nenhum lugar: toda a codificação ocorre localmente, na memória do seu navegador.