English
EspañolGerador de cursor personalizado (CSS)
Escolha uma imagem (PNG ou SVG) ou monte um cursor de círculo. Passe o mouse na área de teste para experimentar antes de copiar.
Cursor do mouse com a cara do site
Tudo é feito no seu aparelho: nada é enviado para a internet.
PNG ou SVG, de preferência 32 × 32 px
e aqui num link
Disponível em: 
Gerador de cursor personalizado (CSS): para que serve
Um cursor personalizado reforça a identidade de portfólios, sites de marca e jogos. Escolha um círculo (anel, cheio ou anel com ponto) na cor e no tamanho que quiser, ou envie uma imagem PNG ou SVG, defina o ponto de clique e teste na área de teste.
O CSS sai com a imagem em data URI, o hotspot, um cursor reserva e a opção de manter a mãozinha em links e botões. A ferramenta avisa quando a imagem passa de 128 px, limite acima do qual os navegadores ignoram o cursor.
Como usar
- Escolha círculo ou imagem.
- Ajuste a cor, o tamanho ou o ponto de clique.
- Teste e copie o CSS.
Quando usar
- Portfólio de designer.
- Site de marca ou campanha.
- Páginas de jogos.
Perguntas frequentes
Qual o tamanho máximo do cursor?
Os navegadores aceitam imagens de cursor de até 128 por 128 px; acima disso, ignoram a imagem e usam o cursor reserva. O tamanho mais seguro e confortável é 32 px.
O que é o ponto de clique (hotspot)?
É o pixel da imagem que vale como a ponta do cursor. Numa seta, fica na ponta; num círculo, no centro. Os dois números depois do endereço da imagem no CSS são a posição desse ponto.
Cursor personalizado atrapalha?
Pode atrapalhar se ficar pequeno, sem contraste ou com o ponto de clique no lugar errado. Use em sites com identidade forte (portfólio, jogo, marca) e sempre mantenha o cursor de mãozinha ou equivalente nos links para mostrar que são clicáveis.
É grátis mesmo?
Sim, 100% grátis. Sem cadastro, sem assinatura e sem limite de uso. Todas as ferramentas do Ferramentas123 são gratuitas e rodam direto no seu navegador.