Generator für eigenen Cursor (CSS)
Wähle ein Bild (PNG oder SVG) oder baue einen Kreis-Cursor. Fahre mit der Maus über den Testbereich, um es vor dem Kopieren auszuprobieren.
So geht’sMauszeiger im Stil der Website
PNG oder SVG, am besten 32 × 32 px
und hier über einen Link
Verfügbar auf: 
Generator für eigenen Cursor (CSS): wofür es gut ist
Ein eigener Cursor stärkt die Identität von Portfolios, Markenwebsites und Spielen. Wähle einen Kreis (Ring, gefüllt oder Ring mit Punkt) in der gewünschten Farbe und Größe oder lade ein PNG- oder SVG-Bild hoch, lege den Klickpunkt fest und teste im Testbereich.
Das CSS kommt mit dem Bild als Data-URI, dem Hotspot, einem Ersatzcursor und der Option, bei Links und Buttons die Hand zu behalten. Das Tool warnt, wenn das Bild über 128 px liegt, dem Limit, über dem Browser den Cursor ignorieren.
So geht’s
- Wähle Kreis oder Bild.
- Passe Farbe, Größe oder Klickpunkt an.
- Teste und kopiere das CSS.
Wann nutzen
- Portfolio von Designern.
- Marken- oder Kampagnenwebsite.
- Spieleseiten.
Häufige Fragen
Wie groß darf der Cursor höchstens sein?
Browser akzeptieren Cursorbilder bis 128 mal 128 px; darüber ignorieren sie das Bild und nutzen den Ersatzcursor. Die sicherste und angenehmste Größe ist 32 px.
Was ist der Klickpunkt (Hotspot)?
Es ist der Pixel des Bildes, der als Spitze des Cursors gilt. Bei einem Pfeil liegt er an der Spitze, bei einem Kreis in der Mitte. Die zwei Zahlen nach der Adresse des Bildes im CSS sind die Position dieses Punktes.
Stört ein eigener Cursor?
Er kann stören, wenn er klein ist, keinen Kontrast hat oder der Klickpunkt an der falschen Stelle liegt. Nutze ihn auf Websites mit starker Identität (Portfolio, Spiel, Marke) und behalte bei Links immer den Handcursor oder Entsprechendes, um zu zeigen, dass sie klickbar sind.
Ist das wirklich kostenlos?
Ja, 100% kostenlos. Ohne Anmeldung, ohne Abo und ohne Nutzungslimit. Alle Tools von Tools123 sind kostenlos.