CSS-Cursor-Tester
Sieh dir mit unserem CSS-Cursor-Tester alle 38 Standard-CSS-Cursor-Stile kostenlos online an. Fahre über eine beliebige Cursor-Karte, um sie in Aktion zu sehen, filtere nach Kategorie, suche nach Namen und klicke, um die CSS-Deklaration sofort zu kopieren. Keine Registrierung nötig.
Preview all 36 standard CSS cursor styles by hovering over each card. Click any card to copy the cursor: CSS declaration to your clipboard. Filter by category or search by name.
36 cursors total - hover to preview, click to copy
Warum unseren CSS-Cursor-Tester nutzen?
- Sofortige CSS-Cursor-Vorschau: Sieh dir alle 38 Standard-CSS-Cursor-Stile an, indem du über jede Karte im CSS-Cursor-Tester fährst. Der Cursor ändert sich beim Hover sofort - kein Klicken, kein Warten und kein Rätselraten, wie jeder Cursor auf deiner Plattform aussieht.
- Sicherer CSS-Cursor-Tester online: Der CSS-Cursor-Tester läuft vollständig im Browser, ohne Datensammlung, Tracking oder Serveranfragen. Es ist ein reines clientseitiges Nachschlagetool - dein Surfen bleibt völlig privat.
- CSS-Cursor-Tester ohne Installation: Nutze den CSS-Cursor-Tester direkt in jedem modernen Browser, ohne Downloads, Plugins oder Erweiterungen. Die Cursor werden mit dem nativen Cursor-Set deines Betriebssystems gerendert, sodass du genau siehst, was deine Nutzer sehen werden.
- 100 % kostenlos mit Kopieren per Klick: Der CSS-Cursor-Tester ist komplett kostenlos, ohne Registrierung, ohne Nutzungslimits und ohne Werbung. Klicke auf eine Cursor-Karte, um die gebrauchsfertige CSS-Deklaration sofort in die Zwischenablage zu kopieren.
Häufige Anwendungsfälle des CSS-Cursor-Testers
- Den richtigen Cursor für UI-Elemente wählen: Nutze den CSS-Cursor-Tester, um den passenden Cursor für Buttons, Links, ziehbare Elemente und deaktivierte Steuerelemente zu finden. Fahre jeden Cursor im Tester an, um genau zu sehen, wie er aussieht, bevor du ihn in dein Stylesheet aufnimmst.
- Design von Drag-and-Drop-Oberflächen: Drag-and-Drop-UIs brauchen präzises Cursor-Feedback - grab beim Hovern, grabbing beim Ziehen, no-drop über ungültigen Zielen. Der CSS-Cursor-Tester zeigt dir alle Drag-Cursor nebeneinander.
- Größenveränderbare Panels und Splitter-Komponenten: Größenveränderbare Panels brauchen Richtungs-Cursor (ew-resize, ns-resize, col-resize, row-resize). Nutze den CSS-Cursor-Tester, um alle Varianten zu sehen und die richtige für jede Ziehpunktrichtung zu wählen.
- Barrierefreiheit und UX-Feedback: Korrektes Cursor-Feedback ist eine Anforderung der Barrierefreiheit - Nutzer verlassen sich auf Cursoränderungen, um zu erkennen, was interaktiv ist. Der CSS-Cursor-Tester hilft dir zu prüfen, dass deaktivierte Elemente not-allowed und Ladezustände wait oder progress verwenden.
- Plattformübergreifende Cursor-Prüfung: CSS-Cursor werden unter Windows, macOS und Linux unterschiedlich dargestellt. Nutze den CSS-Cursor-Tester auf jeder Plattform, um zu prüfen, ob der gewählte Cursor für deine Zielgruppe korrekt aussieht, bevor du veröffentlichst.
- Code-Review und Dokumentation: Nutze den CSS-Cursor-Tester beim Review von CSS-Code oder beim Schreiben von Komponentendokumentation als schnelle Referenz, um zu prüfen, ob Cursor-Werte korrekt und für die beschriebene Interaktion passend sind.
Was ist die CSS-Eigenschaft cursor?
Die CSS-Eigenschaft cursor legt die Form des Mauszeigers fest, die erscheint, wenn der Nutzer über ein Element fährt. Sie ist eines der wichtigsten UX-Signale in Weboberflächen - der Cursor zeigt Nutzern, was bei der Interaktion mit einem Element passiert. Die CSS-Spezifikation definiert 38 Standard-Cursor-Werte, gegliedert in Kategorien: allgemeine Cursor, Link- und Statusanzeigen, Auswahl-Cursor, Drag-and-Drop-Cursor, Größenänderungs-Cursor und Zoom-Cursor. Unser CSS-Cursor-Tester lässt dich alle davon mit dem nativen Cursor-Rendering deines Betriebssystems ansehen, sodass du genau siehst, was deine Nutzer auf ihrer Plattform sehen werden.
So funktioniert unser CSS-Cursor-Tester
- Durchsuchen oder suchen: Nutze die Kategorie-Tabs, um Cursor nach Typ zu filtern (Allgemein, Links & Status, Auswahl, Drag & Drop, Größenänderung, Zoom), oder gib einen Cursor-Namen oder eine Beschreibung in das Suchfeld ein. Der CSS-Cursor-Tester aktualisiert das Raster sofort.
- Zum Ansehen hovern: Bewege die Maus über eine Cursor-Karte, um den Cursor in Echtzeit zu sehen. Die Infoleiste unten zeigt Cursor-Name, CSS-Deklaration und Beschreibung. Der CSS-Cursor-Tester nutzt das native Cursor-Rendering deines Browsers - es werden keine Bilder oder SVGs verwendet.
- Zum Kopieren klicken: Klicke auf eine Cursor-Karte, um die vollständige CSS-Deklaration (z. B. cursor: pointer; ) in die Zwischenablage zu kopieren. Füge sie direkt in dein Stylesheet ein. Die Karte zeigt 1,5 Sekunden lang eine „Kopiert!“-Bestätigung.
CSS-Cursor-Kategorien erklärt
- Allgemein: auto (Browser entscheidet), default (Plattform-Pfeil) und none (ausgeblendeter Cursor). Nutze auto für die meisten Elemente und überschreibe nur, wo nötig.
- Links & Status: pointer für klickbare Elemente, wait für blockierende Vorgänge, progress für Hintergrundvorgänge, help für Tooltip-Auslöser und context-menu für Rechtsklick-Ziele.
- Drag & Drop: grab und grabbing für ziehbare Elemente, move für bewegliche Elemente, copy für Kopiervorgänge, alias für Verknüpfungen, no-drop und not-allowed für ungültige Ziele und deaktivierte Aktionen.
- Größenänderung: Richtungs-Cursor für alle 8 Himmelsrichtungen (n, s, e, w, ne, nw, se, sw) plus bidirektionale Varianten (ew-resize, ns-resize, nesw-resize, nwse-resize) sowie col-resize , row-resize und all-scroll für Tabellen- und Panelgrößenänderung.
Browser-Unterstützung und Plattformunterschiede
Alle 38 CSS-Cursor-Werte im CSS-Cursor-Tester werden von Chrome, Firefox, Safari, Edge und Opera unterstützt. Das visuelle Erscheinungsbild jedes Cursors hängt vom Betriebssystem ab - Windows nutzt Aero-Cursor, macOS ein eigenes Set und Linux ein X11-Cursor-Theme. Das ist beabsichtigt: Der Browser überlässt das Cursor-Rendering dem Betriebssystem, damit sich Cursor auf der Plattform des Nutzers nativ anfühlen. Der none-Cursor blendet den Cursor vollständig aus - nutze ihn vorsichtig und nur, wenn du per JavaScript einen eigenen Cursor bereitstellst, da das Ausblenden ohne Ersatz ein Barrierefreiheitsproblem ist.
Häufig gestellte Fragen
Ein CSS-Cursor-Tester ist ein browserbasiertes Tool, mit dem du alle standardmäßigen CSS-Cursor-Stile ansehen kannst, indem du über jede Cursor-Karte fährst. Unser CSS-Cursor-Tester deckt alle 38 CSS-Cursor-Werte ab, mit Kategoriefilter, Suche und Kopieren der CSS-Deklaration per Klick. Keine Registrierung nötig.
Die CSS-Spezifikation definiert 38 Standard-Cursor-Werte in 6 Kategorien: allgemein (auto, default, none), Links und Status (pointer, progress, wait, context-menu, help), Auswahl (crosshair, cell, text, vertical-text), Drag & Drop (alias, copy, move, no-drop, not-allowed, grab, grabbing), Größenänderung (16 Richtungsvarianten) und Zoom (zoom-in, zoom-out).
Ja - der CSS-Cursor-Tester ist 100 % kostenlos, ohne Registrierung, ohne Konto und ohne Nutzungslimits. Sieh dir so viele Cursor-Stile an und kopiere sie, wie du brauchst - für immer kostenlos.
CSS-Cursor werden von deinem Betriebssystem gerendert, nicht vom Browser. Windows, macOS und Linux haben jeweils eigene Cursor-Themes, daher sieht derselbe Cursor-Wert auf jeder Plattform anders aus. Der CSS-Cursor-Tester zeigt dir den Cursor genau so, wie ihn Nutzer auf demselben Betriebssystem sehen werden.
cursor: wait zeigt an, dass das Programm beschäftigt ist und der Nutzer nicht mit der Seite interagieren kann. cursor: progress zeigt an, dass das Programm im Hintergrund beschäftigt ist, der Nutzer aber weiter interagieren kann. Nutze wait für blockierende Vorgänge und progress für nicht blockierende Hintergrundaufgaben.
cursor: grab zeigt eine offene Hand und bedeutet, dass ein Element gezogen werden kann. cursor: grabbing zeigt eine geschlossene Hand und bedeutet, dass ein Element gerade gezogen wird. Wechsle per JavaScript zwischen beiden - grab bei mouseenter und grabbing bei mousedown.
cursor: not-allowed zeigt an, dass die angeforderte Aktion nicht ausgeführt werden kann - nutze es bei deaktivierten Buttons und Formularfeldern. cursor: no-drop zeigt an, dass ein gezogenes Element am aktuellen Ort nicht abgelegt werden kann - nutze es bei ungültigen Ablagezielen während eines Drag-and-Drop-Vorgangs.
Ja. Die CSS-Eigenschaft cursor akzeptiert einen url()-Wert für eigene Cursor-Bilder: cursor: url(mein-cursor.png) 0 0, auto. Die beiden Zahlen sind die Hotspot-Koordinaten. Gib nach der url() immer einen Fallback-Cursor an, falls das Bild nicht geladen werden kann.