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