CSS Change Mouse Cursor Style | Custom Cursor image

CSS Mouse Cursor Style. Show different mouse cursors when the mouse pointer is over an element.

List of all mouse cursor names and CSS code

Click on the table cell to copy the code

Cursor Name CSS code Preview
auto cursor: auto;
pointer cursor: pointer;
move cursor: move;
help cursor: help;
crosshair cursor: crosshair;
text cursor: text;
vertical-text cursor: vertical-text;
progress cursor: progress;
wait cursor: wait;
col-resize cursor: col-resize;
row-resize cursor: row-resize;
n-resize cursor: n-resize;
e-resize cursor: e-resize;
nw-resize cursor: nw-resize;
sw-resize cursor: sw-resize;
alias cursor: alias;
copy cursor: copy;
cell cursor: cell;
none cursor: none;
not-allowed cursor: not-allowed;
no-drop cursor: no-drop;
all-scroll cursor: all-scroll;
zoom-out cursor: zoom-out;
zoom-in cursor: zoom-in;
s-resize cursor: s-resize;
w-resize cursor: w-resize;
ne-resize cursor: ne-resize;
se-resize cursor: se-resize;
grabbing cursor: grabbing;
grab cursor: grab;
CSS Mouse Cursor 
.cur-auto           { cursor: auto; }
.cur-default        { cursor: default; }
.cur-none           { cursor: none; }
.cur-context-menu   { cursor: context-menu; }
.cur-help           { cursor: help; }
.cur-pointer        { cursor: pointer; }
.cur-progress       { cursor: progress; }
.cur-wait           { cursor: wait; }
.cur-cell           { cursor: cell; }
.cur-crosshair      { cursor: crosshair; }
.cur-text           { cursor: text; }
.cur-vertical-text  { cursor: vertical-text; }
.cur-alias          { cursor: alias; }
.cur-copy           { cursor: copy; }
.cur-move           { cursor: move; }
.cur-no-drop        { cursor: no-drop; }
.cur-not-allowed    { cursor: not-allowed; }
.cur-all-scroll     { cursor: all-scroll; }
.cur-col-resize     { cursor: col-resize; }
.cur-row-resize     { cursor: row-resize; }
.cur-n-resize       { cursor: n-resize; }
.cur-e-resize       { cursor: e-resize; }
.cur-s-resize       { cursor: s-resize; }
.cur-w-resize       { cursor: w-resize; }
.cur-ns-resize      { cursor: ns-resize; }
.cur-ew-resize      { cursor: ew-resize; }
.cur-ne-resize      { cursor: ne-resize; }
.cur-nw-resize      { cursor: nw-resize; }
.cur-se-resize      { cursor: se-resize; }
.cur-sw-resize      { cursor: sw-resize; }
.cur-nesw-resize    { cursor: nesw-resize; }
.cur-nwse-resize    { cursor: nwse-resize; }
.cur-grab           { cursor: grab; }
.grabbing           { cursor: grabbing; }

Grab and Grabbing Mouse Cursor CSS Code

Demo
HTML CSS
<div class="grab-me">grab me</div>

<style>
.grab-me {
    cursor: grab;

    font-size: 20px;
    width: 150px;
    height: 60px;
    background-color: #bbbbbb;
    display: flex;
    align-items: center;
    justify-content: center;
}
.grab-me:active {
    cursor: grabbing;
}
</style>
Try it Yourself

CSS Change Mouse Cursor Style Using External Image PNG

Demo
mouse hover here to see the custom cursor image
HTML CSS
<div class="cursor-image">cursor image</div>

<style>
.cursor-image {
    cursor: url('https://www.html-code-generator.com/images/css/cursor.png'), auto;

    font-size: 20px;
    width: 150px;
    height: 60px;
    background-color: #bbbbbb;
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>
Try it Yourself

Select the mouse cursor below to view the cursor style. And CSS cursor code can be copied

Select Mouse Cursor

Copy CSS mouse cursor code
cursor: pointer;
Report Problem