CSS Cursor Viewer: alle Cursor-Typen live testen
Der CSS Cursor Viewer zeigt alle 36 Werte der CSS-Eigenschaft cursor nach Einsatzzweck sortiert und mit dem echten Mauszeiger deines Systems: Du fährst z. B. über not-allowed, siehst den durchgestrichenen Kreis und kopierst cursor: not-allowed; mit einem Klick. Kostenlos, ohne Anmeldung, alles läuft im Browser.
Gebaut von Justin Schuessler
Code fertig? Bring deine Website mit schnellem, zuverlässigem Webhosting online.
Alle cursor-Werte nach Einsatzzweck
Einsatzzweck
36 von 36 Werten
Die Vorschau zeigt den Cursor so, wie dein Betriebssystem und dein Browser ihn zeichnen. Unter macOS, Windows und Linux sehen viele Cursor deshalb unterschiedlich aus.
Allgemein3
autoDer Browser entscheidet selbst, z. B. Textcursor über Text und Pfeil daneben. Das ist der Standardwert.
Maus hierher bewegendefaultDer normale Pfeil, auch über Text. Für Flächen, die nicht klickbar sind.
Maus hierher bewegennoneBlendet den Mauszeiger aus, z. B. bei Vollbild-Videos, Spielen oder einem eigenen Cursor.
Maus hierher bewegen
Links & Status5
pointerDie Hand mit Zeigefinger für Links, Buttons und alles andere, was sich anklicken lässt.
Maus hierher bewegenhelpFragezeichen am Pfeil, wenn es Hilfe gibt, z. B. für ein Infosymbol mit Tooltip.
Maus hierher bewegencontext-menuZeigt an, dass ein Kontextmenü verfügbar ist, z. B. für Elemente mit eigenem Rechtsklick-Menü.
Maus hierher bewegenprogressPfeil mit Ladesymbol: Etwas lädt im Hintergrund, die Seite bleibt aber bedienbar.
Maus hierher bewegenwaitLadesymbol ohne Pfeil: Die Oberfläche ist blockiert, bis der Vorgang fertig ist.
Maus hierher bewegen
Auswahl4
textDer Textcursor (I-Beam) für Eingabefelder und Text, den man markieren kann.
Maus hierher bewegenvertical-textDer liegende Textcursor für senkrecht gesetzten Text, z. B. bei writing-mode: vertical-rl.
Maus hierher bewegencellEin dickes Plus für Tabellenzellen, die sich auswählen lassen, wie in einer Tabellenkalkulation.
Maus hierher bewegencrosshairFadenkreuz für präzises Arbeiten, z. B. Zeichenflächen, Farbpipetten oder Bildausschnitte.
Maus hierher bewegen
Drag & Drop7
grabOffene Hand für Elemente, die man ziehen kann, z. B. Karten, Listeneinträge oder Slider.
Maus hierher bewegengrabbingGeschlossene Hand, solange ein Element gerade gezogen wird.
Maus hierher bewegenmovePfeilkreuz für Elemente, die sich frei verschieben lassen, z. B. Fenster oder Widgets.
Maus hierher bewegencopyPfeil mit Plus: Beim Ablegen entsteht eine Kopie, z. B. beim Ziehen von Dateien.
Maus hierher bewegenaliasPfeil mit Verknüpfungssymbol: Beim Ablegen entsteht ein Link oder eine Verknüpfung.
Maus hierher bewegenno-dropHier kann das gezogene Element nicht abgelegt werden, z. B. außerhalb einer Ablagezone.
Maus hierher bewegennot-allowedDurchgestrichener Kreis für deaktivierte Buttons und Aktionen, die gerade nicht erlaubt sind.
Maus hierher bewegen
Größe ändern14
col-resizeSpaltenbreite ändern, z. B. an Trennlinien von Tabellenspalten oder geteilten Ansichten.
Maus hierher bewegenrow-resizeZeilenhöhe ändern, z. B. an waagerechten Trennlinien zwischen zwei Bereichen.
Maus hierher bewegenn-resizeDie obere Kante ziehen, um ein Element nach oben zu vergrößern.
Maus hierher bewegene-resizeDie rechte Kante ziehen, um ein Element nach rechts zu vergrößern.
Maus hierher bewegens-resizeDie untere Kante ziehen, um ein Element nach unten zu vergrößern.
Maus hierher bewegenw-resizeDie linke Kante ziehen, um ein Element nach links zu vergrößern.
Maus hierher bewegenne-resizeDie Ecke oben rechts ziehen, um Breite und Höhe zu ändern.
Maus hierher bewegennw-resizeDie Ecke oben links ziehen, um Breite und Höhe zu ändern.
Maus hierher bewegense-resizeDie Ecke unten rechts ziehen, um Breite und Höhe zu ändern.
Maus hierher bewegensw-resizeDie Ecke unten links ziehen, um Breite und Höhe zu ändern.
Maus hierher bewegenew-resizeBreite in beide Richtungen ändern, z. B. an einem waagerechten Slider oder Splitter.
Maus hierher bewegenns-resizeHöhe in beide Richtungen ändern, z. B. an einem senkrechten Splitter.
Maus hierher bewegennesw-resizeDiagonal ziehen von oben rechts nach unten links, z. B. an der Ecke eines Panels.
Maus hierher bewegennwse-resizeDiagonal ziehen von oben links nach unten rechts, z. B. am Griff unten rechts eines Panels.
Maus hierher bewegen
Scrollen & Zoom3
all-scrollPfeile in alle Richtungen: Der Inhalt lässt sich in jede Richtung scrollen, z. B. eine Karte.
Maus hierher bewegenzoom-inLupe mit Plus für Bilder oder Karten, die sich per Klick vergrößern lassen.
Maus hierher bewegenzoom-outLupe mit Minus, wenn ein vergrößertes Bild per Klick wieder kleiner wird.
Maus hierher bewegen
Testfläche: Cursor im Einsatz
Fahr mit der Maus über die Beispiele, zieh die Karte, die Trennlinie und die Panel-Ecke und klick auf das Bild.
Button
pointerDeaktivierter Button
not-allowedTextlink
Mehr dazu steht in der Dokumentation.
pointerEingabefeld
textVerschiebbare Karte
Karte
Zum Verschieben ziehen
grabgrabbingSpaltenbreite ändern
Spalte A · 50 %Spalte B · 50 %col-resizePanel-Ecke ziehen
Panel
160 × 80 px
nwse-resizeLadezustand
Lädt im Hintergrund
Du kannst weiterarbeiten.
Bitte warten
Die Fläche ist blockiert.
progresswaitZoombares Bild
zoom-inzoom-out
Überblick
Was ist die CSS-Eigenschaft cursor?
Die CSS-Eigenschaft cursor legt fest, welcher Mauszeiger erscheint, während die Maus über einem Element steht. Damit zeigst du, was dort passiert: Die Hand bei pointer heißt klickbar, der Textcursor heißt markierbar, der durchgestrichene Kreis bei not-allowed heißt gesperrt. Ohne Angabe gilt auto und der Browser entscheidet selbst.
Syntax
Ein Schlüsselwort pro Regel genügt. Zustände wie :disabled oder :active bekommen ihren eigenen Cursor:
button {
cursor: pointer;
}
button:disabled {
cursor: not-allowed;
}
.card[draggable="true"] {
cursor: grab;
}
.card[draggable="true"]:active {
cursor: grabbing;
}Utility-Klassen wie cursor-pointer in Tailwind CSS setzen dieselbe Deklaration cursor: pointer;. Das Tool selbst kopiert reines CSS, keine Klassen.
36 Standardwerte
Die CSS-Spezifikation kennt 36 Schlüsselwörter, von auto und pointer bis zu den 14 Resize-Cursorn. Dieses Tool zeigt alle, nach Einsatzzweck sortiert.
Wird vererbt
cursor gilt für das Element und alle Kinder, bis ein Kind einen eigenen Wert setzt. Ein cursor: pointer am Container wirkt also auch auf Text darin.
Das System zeichnet
CSS legt nur fest, welcher Cursor erscheint. Wie er aussieht, bestimmen Betriebssystem und Browser. Unter macOS, Windows und Linux sieht er deshalb verschieden aus.
Kein :hover nötig
Der Cursor erscheint ohnehin nur, solange die Maus über dem Element steht. Setz cursor deshalb direkt am Element, eine eigene :hover-Regel brauchst du dafür nicht.
Cursor-Typen
Alle 36 CSS Cursor-Typen im Überblick
Das Tool sortiert die Werte der CSS-Eigenschaft cursor nach Einsatzzweck in sechs Gruppen. Über den Filter Einsatzzweck blendest du nur eine Gruppe ein.
Allgemein3
Der Standardwert auto, der normale Pfeil default und none, das den Mauszeiger ausblendet.
autodefaultnone
Links & Status5
Die Hand für Klickbares, Hilfe, Kontextmenü und die zwei Ladezustände progress und wait.
pointerhelpcontext-menuprogresswait
Auswahl4
Textcursor waagerecht und senkrecht, das Plus für Tabellenzellen und das Fadenkreuz für präzises Arbeiten.
textvertical-textcellcrosshair
Drag & Drop7
Offene und geschlossene Hand, Pfeilkreuz und die Rückmeldungen beim Ablegen: Kopie, Verknüpfung, nicht ablegbar, nicht erlaubt.
grabgrabbingmovecopyaliasno-dropnot-allowed
Größe ändern14
14 Resize-Cursor für Kanten, Ecken, Spalten und Zeilen, von n-resize bis nwse-resize.
col-resizerow-resizen-resizee-resizes-resizew-resizene-resizenw-resizese-resizesw-resizeew-resizens-resizenesw-resizenwse-resize
Scrollen & Zoom3
Scrollen in alle Richtungen und die Lupe mit Plus oder Minus für Bilder und Karten.
all-scrollzoom-inzoom-out
Best Practices
Welcher CSS Cursor passt wann?
Der Cursor ist ein Versprechen an den Nutzer. Diese Regeln halten es ein.
pointer nur für Klickbares
Die Hand verspricht: Hier passiert etwas beim Klick. Setze sie auf Links, Buttons und klickbare Karten, aber nicht auf Text oder Flächen ohne Funktion.
not-allowed für deaktivierte Zustände
Ein gesperrter Button bekommt cursor: not-allowed. Achtung: Mit pointer-events: none erscheint kein Cursor mehr, weil das Element die Maus gar nicht bemerkt.
grab und grabbing für Drag
Was sich ziehen lässt, zeigt grab. Während des Ziehens wechselt es zu grabbing, etwa über :active oder eine Klasse, die dein Script setzt.
text für Eingaben und Text
Eingabefelder bringen den Textcursor schon mit. Setze text nur dort selbst, wo sich Inhalt wirklich markieren oder bearbeiten lässt.
progress statt wait
Lädt etwas im Hintergrund und die Seite bleibt bedienbar, passt progress. wait nur dann, wenn die Oberfläche wirklich blockiert ist.
none nur mit Ersatz
Ein unsichtbarer Mauszeiger verwirrt. cursor: none passt zu Spielen, Videos im Vollbild oder einem eigenen Cursor, der den Systemzeiger ersetzt.
So funktioniert es
So findest du den passenden CSS Cursor
Drei Schritte, ohne Anmeldung und ohne Installation.
Schritt 1
Cursor finden
Such nach einem Wert, einem Einsatzzweck wie resize oder drag oder einem Zustand wie disabled, oder filtere nach Gruppe.
Schritt 2
Cursor ausprobieren
Fahr mit der Maus über die Vorschaufläche einer Kachel oder bediene die Beispiele in der Testfläche, um den echten Cursor deines Systems zu sehen.
Schritt 3
Deklaration kopieren
Ein Klick auf Kopieren legt genau die Deklaration in die Zwischenablage, z. B. cursor: not-allowed;. Füge sie in deine CSS-Regel ein.
Eigene Cursor
Eigenen Cursor per url() setzen
Statt eines Schlüsselworts kannst du ein eigenes Bild als Mauszeiger angeben. Nach der Bildadresse folgen optional die Koordinaten des Hotspots, also des Punkts, der klickt. Am Ende steht immer ein Schlüsselwort als Ersatz, falls das Bild nicht lädt.
.canvas {
cursor:
url("/cursors/pencil.svg") 2 30,
crosshair;
}Geeignet sind PNG oder SVG. Browser zeigen eigene Cursor nur bis 128 × 128 Pixel, üblich sind 32 × 32. Ein Cursor-Bild sollte den Klickpunkt klar erkennen lassen.
Mehr entdecken
Weitere Tools
HTML & CSS Formatter online (Code verschönern)
HTML und CSS online formatieren, einrücken und verschönern – mit automatischer Erkennung der Sprache. Läuft komplett im Browser, ohne Upload.
Gebaut von Luca Stanek
SVG in PNG umwandeln (SVG to PNG)
NeuSVG in PNG umwandeln: Vektorgrafiken scharf in jeder Größe als PNG, JPG oder WebP speichern, mit transparentem Hintergrund und Vorlagen für Favicon, Discord-Emoji und Minecraft-Server-Icon. Läuft komplett im Browser.
Gebaut von Luca Stanek
Color Picker
Farben live zwischen HEX, RGB, HSL, HSV und CMYK umrechnen, den nächsten CSS-Named-Color-Treffer finden und den WCAG-Kontrast gegen Schwarz/Weiß prüfen - komplett im Browser.
Gebaut von Justin Schuessler
Contrast Checker
WCAG-Kontrastverhältnis zwischen zwei Farben live berechnen und gegen AA/AAA sowie UI-Komponenten prüfen - komplett im Browser.
Gebaut von Justin Schuessler
Color Scheme Generator
Komplementäre, analoge, triadische und weitere Farbschemata live aus einer Basisfarbe erzeugen - nichts wird gespeichert oder übertragen.
Gebaut von Justin Schuessler
Favicon Generator
Aus einem beliebigen Bild einen kompletten Favicon-Satz erzeugen - favicon.ico, Apple-Touch-Icon, Android-Chrome-Icons, site.webmanifest und fertiges HTML-Snippet zum Kopieren, komplett im Browser.
Gebaut von Jakub Martyniak
FAQ
Häufig gestellte Fragen
Kurze Antworten rund um die CSS-Eigenschaft cursor und dieses Tool.
36 Schlüsselwörter in sechs Gruppen: Allgemein (auto, default, none), Links & Status (pointer, help, context-menu, progress, wait), Auswahl (text, vertical-text, cell, crosshair), Drag & Drop (grab, grabbing, move, copy, alias, no-drop, not-allowed), 14 Resize-Cursor sowie Scrollen & Zoom (all-scroll, zoom-in, zoom-out). Dazu kommen eigene Bilder per url().
pointer passt zu allem, was beim Klick etwas auslöst: Links, Buttons, klickbare Karten oder Icons. Links haben die Hand schon von Haus aus, Buttons in vielen Browsern nicht. Auf Text oder Flächen ohne Funktion gehört pointer nicht. cursor: hand ist ein alter, nicht standardisierter Wert aus frühen Internet-Explorer-Versionen und gehört deshalb nicht zu den 36 Werten im Tool. Die Hand bekommst du mit cursor: pointer;.
Setz am Element cursor: auto, dann entscheidet der Browser selbst, oder cursor: default für den normalen Pfeil. Weil cursor vererbt wird, überschreibst du einen pointer vom Elternelement direkt am Kind. Beide Werte findest du im Tool in der Gruppe Allgemein.
cursor: not-allowed, also der durchgestrichene Kreis. Setzt du am deaktivierten Button zusätzlich pointer-events: none, erscheint der Cursor nicht mehr, weil das Element die Maus dann ignoriert. In der Testfläche siehst du den Button mit not-allowed.
grab ist die offene Hand über einem Element, das sich ziehen lässt, grabbing die geschlossene Hand während des Ziehens. move zeigt ein Pfeilkreuz und passt zu Elementen, die sich frei verschieben lassen, etwa Fenster oder Widgets.
progress zeigt einen Pfeil mit Ladesymbol: Im Hintergrund lädt etwas, die Seite bleibt bedienbar. wait zeigt nur das Ladesymbol und bedeutet, dass die Oberfläche blockiert ist. Für die meisten Ladevorgänge im Web passt progress.
Mit cursor: url(cursor.svg) 2 30, crosshair; gibst du ein Bild und optional den Hotspot an, danach folgt immer ein Schlüsselwort als Ersatz. Browser zeigen eigene Cursor nur bis 128 × 128 Pixel. Dieses Tool zeigt die 36 Standardwerte, eigene Bilder lädst du hier nicht hoch.
CSS legt nur fest, welcher Cursor erscheint. Gezeichnet wird er von Betriebssystem und Browser, deshalb unterscheidet er sich unter macOS, Windows und Linux. Touchgeräte haben keinen Mauszeiger: Dort zeigt das Tool eine Liste mit Beschreibung und Kopieren-Button. Alles läuft im Browser, ohne Upload.
Noch weitere Fragen?
Support kontaktierenDeine Website braucht zuverlässiges Hosting
Ein ZAP-Hosting vServer bringt deine Seite zuverlässig online.
Kein Setup. Kein Risiko. In Sekunden online.
Auf der Suche nach weiteren Tools? Alle Entwickler-Tools ansehen
Bevorzugte Quelle bei Google
