Creating a custom cursor

Readymag
Readymag
Feb 2 · 2 min read

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 asked frequently 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

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:

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:

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:

or

depending on your needs (see above).

Join Readymag and create your own websites with a custom cursor!

Readymag

Design the web

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store