Make Custom CSS Cursor

If you’re a web developer or designer, you may have come across the need to customize the cursor on your website. The default cursor that appears when you hover over most elements on a webpage is the arrow cursor, but sometimes you may want to use a different cursor to better fit the design of your website or to improve the user experience. You can add a cursor to entire website/webapp or alternatively can be added to a single element.

One way to customize the cursor on your website is to use custom CSS. CSS, or Cascading Style Sheets, is a stylesheet language used to describe the look and formatting of a document written in a markup language. With custom CSS, you can specify the cursor you want to use for different elements on your website.

Here is complete list of CSS Cursor that are prebuilt in your system.

HTML

<!-- A piece of HTML code -->
<h1 class="title">CSS Cursor</h1>
<div class="container">
	<div class="item alias">alias</div>
    <div class="item all-scroll">all-scroll</div>
    <div class="item auto">auto</div>
    <div class="item cell">cell</div>
    <div class="item context-menu">context-menu</div>
    <div class="item col-resize">col-resize</div>
    <div class="item copy">copy</div>
    <div class="item crosshair">crosshair</div>
    <div class="item default">default</div>
    <div class="item e-resize">e-resize</div>
    <div class="item ew-resize">ew-resize</div>
    <div class="item grab">grab</div>
    <div class="item grabbing">grabbing</div>
    <div class="item help">help</div>
    <div class="item move">move</div>
    <div class="item n-resize">n-resize</div>
    <div class="item ne-resize">ne-resize</div>
    <div class="item nesw-resize">nesw-resize</div>
    <div class="item ns-resize">ns-resize</div>
  	<div class="item nw-resize">nw-resize</div>
  	<div class="item nwse-resize">nwse-resize</div>
  	<div class="item no-drop">no-drop</div>
    <div class="item none">none</div>
    <div class="item not-allowed">not-allowed</div>
    <div class="item pointer">pointer</div>
    <div class="item progress">progress</div>
    <div class="item row-resize">row-resize</div>
    <div class="item s-resize">s-resize</div>
    <div class="item se-resize">se-resize</div>
    <div class="item sw-resize">sw-resize</div>
    <div class="item text">text</div>
    <div class="item w-resize">w-resize</div>
    <div class="item wait">wait</div>
    <div class="item zoom-in">zoom-in</div>
    <div class="item zoom-out">zoom-out</div>
</div>

CSS

.title {
    text-align: center;
    padding: 50px;
}
.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 20px;
    max-width: 475px;
    margin: auto;
}
.item {
    background: rgb(255, 230, 8);
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2d2d2d;
    padding: 20px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.15);
}
.alias { cursor: alias; }
.all-scroll {cursor: all-scroll; }
.auto {cursor: auto; }
.cell {cursor: cell; }
.context-menu {cursor: context-menu; }
.col-resize {cursor: col-resize; }
.copy {cursor: copy; }
.crosshair {cursor: crosshair; }
.default {cursor: default; } 
.e-resize {cursor: e-resize; }
.ew-resize {cursor: ew-resize; }
.grab {cursor: grab; }
.grabbing {cursor: grabbing; }
.help {cursor: help; }
.move {cursor: move; }
.n-resize {cursor: n-resize; }
.ne-resize {cursor: ne-resize; }
.nesw-resize {cursor: nesw-resize; }
.ns-resize {cursor: ns-resize; }
.nw-resize {cursor: nw-resize; }
.nwse-resize {cursor: nwse-resize; }
.no-drop {cursor: no-drop; }
.none {cursor: none; }
.not-allowed {cursor: not-allowed; }
.pointer {cursor: pointer; }
.progress {cursor: progress; }
.row-resize {cursor: row-resize; }
.s-resize {cursor: s-resize; }
.se-resize {cursor: se-resize; }
.sw-resize {cursor: sw-resize; }
.text {cursor: text; }
.w-resize {cursor: w-resize; }
.wait {cursor: wait; }
.zoom-in {cursor: zoom-in; }
.zoom-out {cursor: zoom-out; }

Preview

This code will change the cursor to the pointer cursor whenever the user hovers over a hyperlink. The pointer cursor is the cursor that appears when you hover over a clickable element, such as a button or a link.

Here is the GitHub repository code. Here is the live preview.

Customizing the cursor with CSS can be a useful way to improve the user experience on your website and to make your website more visually appealing. It’s a simple and effective way to add some extra polish to your website.

---

Custom CSS Cursor

You can use your custom image as a CSS cursor.

Here is a simple example. Hover over the box below. 👇

div {
	width: 300px;
	height: 300px;
  	margin: 0 auto;
	border: 1px solid #000;
  	background: #A9DDD6;
  
  	/* Add custom image */
  	cursor: url('https://teamcodearchitects.com/wp-content/uploads/2022/12/mdi_airplane.png'), auto; 
}

---

Browser Support for Cursor Property

Thank you for reading the blog. Follow us on Instagram. Read about other CSS topic from here.