How to add custom cursor in Squarespace website

Want to give your Squarespace site a unique, interactive edge? One of the simplest ways to instantly elevate your website’s aesthetic is by adding a custom cursor. Whether you’re running a creative portfolio, online shop, or personal blog, a custom cursor can add that little extra wow factor and tie into your brand’s vibe seamlessly.

In this quick tutorial, I’ll walk you through how to add your own custom cursor to your Squarespace site—no developer required. Let’s dive in.

---

🧰 What You’ll Need

• A Squarespace website (version 7.1 preferred, but 7.0 works too)
• A custom cursor image (preferably a .png file with a transparent background)
• Access to the Custom CSS panel

---

🎨 Step 1: Create or Find a Custom Cursor

First, you need a cursor image. Keep these things in mind:

• Use a small image (around 32×32 px or 48×48 px).
• Save it in .png format with a transparent background.
• You can create your own in tools like Photoshop or Canva, or find free ones on sites like Cursor.cc or Icons8.

---

📤 Step 2: Upload the Cursor Image to Squarespace

1. Go to Settings → Files (or use any page’s text block to upload).
2. Click the upload icon and upload your .png cursor.
3. Once uploaded, copy the direct link to the image.

Here’s how:

• After uploading in a text block, click the file link → “Copy URL.”

---

💻 Step 3: Add the Custom Cursor via CSS

Now, head over to your Custom CSS panel:

1. Go to Design → Custom CSS.
2. Paste the following code, replacing the image URL with the one you copied:

* {
  cursor: url('https://your-image-url.png'), auto;
}

✅ Make sure the image URL is in single quotes ' '
✅ The auto fallback ensures the browser uses a default cursor if needed

---

🧪 Step 4: Preview & Tweak

Once you paste the code, you should instantly see the custom cursor take effect in preview mode. Test it out! Hover around your site and make sure the cursor looks good in different sections.

If your cursor feels off-center, you can adjust the “hotspot” (the point where the click registers). You’ll need to host a .cur file or use this format:

* {
  cursor: url('your-cursor.png') 10 10, auto;
}

Where 10 10 refers to the X and Y coordinates from the top-left corner of your cursor image.

---

🎯 Optional: Add Cursor to Specific Areas Only

Want your cursor to show only in certain parts of your site? Just change the * selector to a more specific one:

body {
  cursor: url('your-cursor.png'), auto;
}

Or maybe just on links:

a {
  cursor: url('your-cursor.png'), pointer;
}

---

👀 Things to Keep in Mind

• Mobile browsers often ignore custom cursors, so don’t stress if it doesn’t show on your phone.
• Keep the design clean—some cursor images can be too big or distracting.
• Test across multiple browsers for compatibility.

---

💬 Final Thoughts

Adding a custom cursor to your Squarespace site is a fun and functional way to make your site feel more interactive and personalized. It’s easy to set up and instantly adds a playful or professional touch—depending on your style.

If you give it a try, tag me or drop your link—I’d love to see how it turned out!

---

Want more Squarespace tips like this? Stick around or subscribe to the blog. 😊