Custom cursors in Webflow, Framer, Wix and Squarespace

Step 1: Get the cursor file ready

Whatever the builder, start with the same three things:

1. An image at 32x32 pixels, PNG with a transparent background, or SVG with width and height set. Larger images are dropped near the page edges, and anything above 128x128 is ignored.
2. The hotspot: the pixel that does the clicking, counted from the top-left corner. For an arrow it is the tip, for a dot or crosshair the centre.
3. A fallback keyword: auto behind an arrow, pointer behind a hand.

The cursor maker gives you the PNG and the finished CSS line in one go. Upload the image to your builder’s asset or media library and copy its address.

Step 2: Webflow

Built-in keywords. Select the element, open the Style panel, expand Effects and pick from the Cursor list. Set it on the element’s normal state; it shows on hover by itself.

Image cursors. The Style panel only offers keywords, so an image needs custom code:

1. Upload the PNG or SVG in the Assets panel and copy its URL.
2. In Site settings > Custom code > Head code (or the page’s own custom code), add:

<style>
  .brand-zone { cursor: url("PASTE-THE-ASSET-URL") 4 2, auto; }
  .brand-zone a, .brand-zone button { cursor: url("PASTE-THE-LINK-CURSOR-URL") 16 16, pointer; }
</style>

3. Give the section the class brand-zone in the Designer.
4. Publish, or open the preview. Custom code does not run on the Designer canvas.

Custom code may need a paid site plan, so check your plan before you design around it.

Step 3: Framer

Built-in cursors. Select a layer, or the page’s main breakpoint to cover the whole site, and find the Cursor section in the right panel. You can pick a standard cursor or attach a component as a custom cursor:

• Replace hides the system cursor and shows your component instead.
• Follow keeps the system cursor and moves your component alongside it.

Variants on the cursor component give you hover and pressed states.

Image cursors with an exact hotspot. Add the CSS in your site’s custom code settings (in the head) and give the section a class through an Embed or a code component. This keeps the real system cursor behaviour, which is sharper and never lags.

If you use Replace, test forms and touch devices: people still need the text cursor in fields.

Step 4: Wix

Wix Studio has a cursor setting:

1. Select the page, a section or an element.
2. Open the Inspector with the arrow at the top right of the editor.
3. Scroll to Cursor, add a suggested cursor or upload your own JPG, PNG or SVG.
4. Set the size with the slider. Wix recommends between 16x16 and 128x128 pixels; 32x32 is the safe choice.
5. Use Preview: cursor changes do not show on the editor canvas.

A cursor on a child element wins over its parent’s, and you can set a different cursor per breakpoint.

Classic Wix Editor. Use Settings > Custom Code in the site dashboard, place a <style> block in the head, and point it at an image you uploaded to the Media Manager. Wix only runs custom code on a published site with a connected domain.

Step 5: Squarespace

1. Open Website > Pages, scroll to Website Tools and choose Custom CSS. On older 7.0 sites it lives under Design > Custom CSS.
2. Click Custom Files, upload your PNG and click it to drop its address into the editor.
3. Wrap that address in a cursor rule:

html {
  cursor: url("PASTE-THE-FILE-URL") 4 2, auto;
}
a, button {
  cursor: url("PASTE-THE-LINK-CURSOR-URL") 16 16, pointer;
}

4. Save. If an old cursor keeps showing, add ?v=2 to the end of the file address to get past the cache.

Plan details for custom CSS and code injection change from time to time. Check your plan if the panel is missing.

Step 6: Test before you publish

• Every browser. Check Chrome, Safari and Firefox. Safari and recent Chrome drop a custom cursor whenever it would stick out of the page, so move to each edge.
• Links and buttons. They set their own cursor, so your arrow disappears over them unless you add a rule for them, as in the examples above.
• Forms. Fields should keep the text I-beam.
• Touch devices. A cursor does nothing on a phone, but a “replace” effect must not hide anything important there.
• Dark and light sections. Give the image an outline so it shows on both.

FAQ

Why does my custom cursor turn back into the hand over buttons?

Buttons and links set their own cursor, usually pointer, and it wins over a cursor set on a parent. Add a rule that targets a and button inside your section, as in the examples above.

Why does the cursor not show in the editor?

Webflow’s custom code and Wix’s cursor setting only take effect on the published site or in preview, not on the editing canvas. Open the preview before you change anything.

Can I use an animated GIF as a cursor?

You can upload one, but browsers only show a single frame. For movement, use a follower effect such as the dot and ring follower; every effect page has notes for Webflow and Framer.