Creating a custom cursor

Learn how to design a visually-catching custom cursor with just a few lines of code.

readymag blog_creating a custom cursor

We’re all used to a black arrow as our primary cursor. However, with a little bit of code, you can pretty easily swap out the arrow for any image you like. This can be a great way to emphasize the identity of a project, and the Readymag support team is frequently asked about implementation. Below we provide some inspiration with a few examples that we love, then explain how to set up custom cursors for your project.

Code injection is a feature available with Readymag Professional and Custom plans. You can try it out on any plan in Preview mode.

Examples to inspire you

Before we explain the technical part, here are some examples to get your own ideas flowing.

Typography Principles

For this thorough research of the history and theory of typography, using a gray circle as a cursor helps it stand out against black and white backgrounds. You can see another example from the same creator (Obys Agency) on their 2-year anniversary site.

Jack Towers portfolio

A portfolio with a strong Web 1.0 vibe offering a ginormous pixelated cursor, that balances with the proportions of the page and adds an extra layer of continuity.

Komnata Agency

This custom cursor allows you to draw with fluorescent lights. Take note, this style requires significantly more coding than the technique described below.

Implementing a custom cursor

We recommend using the CSS cursor property to customize the cursor in your Readymag project. Here’s how:

1. Create a Code widget.

2. Double-click on the widget and insert the following code into its CSS section, pasting over any previously existing code:

body, html { cursor: url(*******************), auto; }

The link in parentheses after the URL field should link to any small (about 10x10 pixels) image you want to use as a cursor. The auto keyword denotes a fallback — a cursor shape that will load if the image link isn’t accessible for some reason.

3. You can also use in-browser icons with the following syntax:

body, html { cursor: move; }

The full list of options can be found here. Note that auto from the previous section is also an in-browser icon.

4. Finally, you can set the cursor to change only when a user hovers over specific page elements. Every element in Readymag has a data-id property — you can check by inspecting the element via the Browser Dev Tools.

Copy the data-id property, add it to the field below, then add the following code to your Code widget > CSS:

[data-id=”************”] { cursor: help; }

or

[data-id=”************”] { cursor: url(********), auto; }

depending on your needs (see above).