How To Create A Custom Cursor Using CSS

Marvis ChukwudiMarvis Chukwudi
3 min read

Introduction

If you've tried using a custom icon or image as your cursor and your browser fails to recognise the image, this article is for you. Custom cursors are user-defined images or icons that replace the standard cursor on a computer screen. The appearance of these personalised pointers might vary, ranging from simple shapes to intricate designs or animations.

Here are some examples of customised cursors for use on Codepen.

90s emoji cursor

Cairo cursors

Browsers such as Firefox and Chrome implement cross-origin restrictions, which present issues when implementing custom cursors. CORS, "Cross-Origin Resource Sharing," is a security standard that allows servers to identify the origins from which browsers can access resources.

As a result, the custom cursor won't function since the icons or images you intend to use do not share the same host, and your browser lacks the authorization to request these resources. In this case, there are a few solutions, but the one addressed in this article is image encoding.

Base64 Encoding

What is Base64 Encoding?

Base64 encoding converts binary data to ASCII text, which includes images, movies, and files. It is commonly used to encrypt binary data, for safe transmission via text-based protocols such as email or HTML.

How does Base64 Encoding work?

Base64 encoding splits binary values into segments converted to ASCII letters. This procedure comprises breaking the binary values into groups, dividing each binary group into bits and assigning the bits to the correct Base64 character.

The outcome is a text-based representation of the data, enabling seamless integration into text-based documents or transmission over text-based protocols, ensuring data integrity.

Why is Base64 Encoding important?

Base64 encoding simplifies the integration of custom cursors by allowing developers to embed cursor images directly into web code, enhancing efficiency, minimising reliance on external resources, and assuring cross-browser compatibility.

Converting images

Converting Images Using Base64 Encoders

Base64 encoders assist with converting images quickly. These tools allow you to generate characters from submitted images, which you can then copy and paste into your code.

Conversion Tools

Here are some free online encoders you can use:

Embedding in Your Code

Step 1: Choose an online encoder and upload your image.

Step 2: Copy the CSS code.

Step 3: You can insert the copied generated text from the encoder directly into your CSS styles, like this:

/*Copy and paste the encoded text. Also, include a comma and `auto` at the end of the encoded text.   */

button:hover{
  cursor:
    url('data:image/png;base64,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'), auto;
}

Check out this short demo on Codepen.

Conclusion

In conclusion, by employing these efficient techniques and leveraging the available tools, you can seamlessly integrate custom cursors into your web projects while ensuring compatibility and security.

2
Subscribe to my newsletter

Read articles from Marvis Chukwudi directly inside your inbox. Subscribe to the newsletter, and don't miss out.

Written by

Marvis Chukwudi
Marvis Chukwudi