Générateur de curseur personnalisé (CSS)
Choisissez une image (PNG ou SVG) ou composez un curseur en cercle. Passez la souris dans la zone de test pour essayer avant de copier.
Mode d’emploiUn curseur de souris à l’image du site
PNG ou SVG, de préférence 32 × 32 px
et ici sur un lien
Générateur de curseur personnalisé (CSS): à quoi ça sert
Un curseur personnalisé renforce l’identité des portfolios, des sites de marque et des jeux. Choisissez un cercle (anneau, plein ou anneau avec point) de la couleur et de la taille que vous voulez, ou envoyez une image PNG ou SVG, définissez le point de clic et testez dans la zone de test.
Le CSS sort avec l’image en data URI, le hotspot, un curseur de secours et l’option de garder la main sur les liens et les boutons. L’outil vous avertit lorsque l’image dépasse 128 px, limite au-delà de laquelle les navigateurs ignorent le curseur.
Mode d’emploi
- Choisissez un cercle ou une image.
- Réglez la couleur, la taille ou le point de clic.
- Testez et copiez le CSS.
Quand l’utiliser
- Portfolio de designer.
- Site de marque ou de campagne.
- Pages de jeux.
Questions fréquentes
Quelle est la taille maximale du curseur ?
Les navigateurs acceptent des images de curseur jusqu’à 128 par 128 px ; au-delà, ils ignorent l’image et utilisent le curseur de secours. La taille la plus sûre et la plus confortable est de 32 px.
Qu’est-ce que le point de clic (hotspot) ?
C’est le pixel de l’image qui sert de pointe du curseur. Pour une flèche, il est à la pointe ; pour un cercle, au centre. Les deux nombres après l’adresse de l’image dans le CSS sont la position de ce point.
Un curseur personnalisé peut-il gêner ?
Il peut gêner s’il est petit, sans contraste ou avec le point de clic au mauvais endroit. Utilisez-le sur des sites à forte identité (portfolio, jeu, marque) et conservez toujours le curseur en forme de main ou équivalent sur les liens pour montrer qu’ils sont cliquables.
Vraiment gratuit ?
Oui, 100 % gratuit. Sans inscription, sans abonnement et sans limite d’utilisation. Tous les outils de Tools123 sont gratuits.