6 CSS Custom Cursor Styles

The cursor CSS property accepts a comma-separated list: one or more url() images followed by a mandatory keyword fallback like auto, pointer, or grab. The browser walks the list top-to-bottom and uses the FIRST cursor it can successfully load, so cursor: url("loupe.svg") 12 12, url("loupe.png") 12 12, zoom-in means “try the SVG first, fall back to the PNG, and if both fail use the native zoom-in cursor.” The two trailing numbers after each URL are the hotspot — the exact pixel inside the image that counts as the click point. For an arrow tip that's usually 4 3 (upper-left tip); for a centered magnifier or crosshair it's the image's center. Omitting the hotspot leaves the browser to guess, which makes clicks feel misaligned by a few pixels — always set it explicitly. The keyword at the end is REQUIRED — cursor: url("foo.svg") with no trailing keyword is invalid CSS and the entire declaration is dropped, giving you the default arrow. This is the single most common bug developers hit when adding custom cursors. Also worth knowing: browsers cap custom cursor images around 128×128px (many are stricter — Chrome ignores anything above 128px, older Safari caps around 32×32) and silently reject images larger than that, falling through to your keyword. Keep custom cursor art small (16-32px is the sweet spot) and use an SVG data-URI for zero network cost. Every demo in this collection uses inline SVG data-URIs with keyword fallbacks, so the whole cursor ships inside your CSS with no extra requests.

The signature portfolio effect is a crisp dot locked to the pointer plus a larger ring that eases in with a springy trailing lag. It's built on linear interpolation (lerp) inside a requestAnimationFrame loop. On pointermove you store the latest target coordinates mx, my. Then every animation frame, you nudge the ring's current position rx, ry toward the target by a fraction: rx += (mx - rx) * 0.15. That 0.15 factor is the ease strength — 0.1 is dreamy and slow, 0.2 is snappy, 0.15 is the sweet spot most portfolio sites use. The dot uses the target coordinates directly so it feels locked; the ring uses the eased position so it drifts behind. Both layers position via transform: translate(<x>px, <y>px) translate(-50%, -50%) — the first translate places the layer at the coordinate, the second recentres it on that coordinate. NEVER animate left/top in the loop; that triggers layout every frame and destroys Interaction to Next Paint. transform is handled by the compositor and stays at 60fps even on mid-tier Android. The native cursor is hidden with cursor: none ONLY on the stage where the replacement layers live — never site-wide, because a hidden cursor with no replacement leaves users unable to see where they're pointing. Every follower needs pointer-events: none so it never intercepts clicks meant for the underlying content, plus prefers-reduced-motion and @media (hover: hover) and (pointer: fine) guards so touch users and motion-sensitive users get the native cursor. Demo 02 in this collection ships the full ~20-line vanilla implementation with all four guards; drop it into any stack (React, Vue, Svelte, Astro, plain HTML) — no library needed.

Before the :has() selector shipped in 2023, a parent could not react to a child's state — if you wanted the cursor blob to grow when the user hovers a button, JavaScript had to attach hover listeners to every button, toggle a class on the blob or its parent, and clean up on unhover. That's fragile and janky, especially on grids with dozens of interactive elements. :has() flips the direction: a selector like .stage:has([data-magnetic]:hover) .blob { scale: 3.4 } reads as “when the stage contains any hovered element with a data-magnetic attribute, grow the blob to 3.4× scale.” The parent restyles itself based on the descendant's state — 100% CSS, no JavaScript, no class toggling, no cleanup. Demo 03 in this collection uses this exact pattern: JavaScript only moves the blob on pointermove; the entire hover-expand behavior lives in a single CSS rule. Combined with mix-blend-mode: difference on the blob, the effect reads as “the cursor wraps every button in a bright focus ring” automatically — the blend inverts against whatever it covers, so contrast is guaranteed regardless of button color. Browser support: :has() shipped in Safari 15.4 (March 2022), Chrome 105 (August 2022), Firefox 121 (December 2023). For older browsers, wrap the rule in @supports selector(:has(*)) and provide a JS class-toggle fallback for the <2% of traffic that predates it. This is one of the biggest quality-of-life improvements in modern CSS — most sites that used to ship 50+ lines of JavaScript for hover states can now do it in one line of CSS.

The affordance that tells users “you can drag this” is a two-part pattern: (1) visual — the cursor changes to a hand icon on hover and to a closed hand while dragging; (2) behavior — the track actually pans when they drag. Demo 04 in this collection ships both. The cursor half is almost pure CSS. The track gets cursor: url("open-hand.svg") 12 6, grab for its default state, and an .is-dragging class (added on pointerdown, removed on pointerup) swaps to cursor: url("closed-hand.svg") 12 10, grabbing. Both custom images fall back to the standard grab/grabbing keywords the browser ships natively, so even without the SVG the affordance is correct. Text and images inside the track get user-select: none and -webkit-user-drag: none so dragging pans the track instead of selecting text or ghost-dragging an image (WebKit's default). The drag-to-scroll half uses Pointer Events (not mouse events — pointer events unify mouse, touch, and stylus in one API). On pointerdown you record the pointer's start X and the track's current scrollLeft, call setPointerCapture(pointerId) so the drag survives even if the cursor leaves the track element, and add the .is-dragging class. On pointermove you set scrollLeft = startLeft - (currentX - startX). On pointerup you release the pointer capture and remove the class. This is a 15-line handler; no drag library needed. The whole thing is wrapped in @media (hover: hover) and (pointer: fine) so touch users get native momentum scrolling (which is superior to a JS reimplementation on mobile). Accessibility caveat: dragging must NEVER be the ONLY way to move — always provide keyboard-focusable buttons or make the track's children real focusable elements so keyboard and screen-reader users can navigate without touching a mouse.

The e-commerce and portfolio favorite: hovering a product or project card reveals a pill — “View”, “Play”, “Read” — that glides along with the pointer. Naively you might attach a hover listener to every card and toggle a badge visibility class. That scales badly and duplicates handler code. Demo 05 in this collection uses event delegation plus a data-attribute label per card, so one handler at the grid level powers the entire gallery no matter how many cards it holds. Each card carries its own label in data-cursor-label: <a data-cursor-label="View">...</a> for case studies, data-cursor-label="Play" for videos, data-cursor-label="Read" for articles. A single badge element sits at the grid level with pointer-events: none so it never blocks clicks. A single delegated pointerover handler on the grid reads the hovered card's label via e.target.closest('[data-cursor-label]').dataset.cursorLabel and writes it into the badge's textContent. The closest() call is critical — the pointer is usually over an inner child element (an image, a heading), not the card itself, so raw e.target would miss the label. A separate pointermove handler positions the badge with transform: translate() (with a light lerp for smoothness); pointerout hides it. Show/hide is a CSS transition on opacity and scale — the badge springs from 0.6 to 1 for a lively pop. Because the label comes from the DOM via data-attribute, adding a card with a new verb needs zero JavaScript changes — just add data-cursor-label="Buy" or whatever new label makes sense. This is the pattern Awwwards-style portfolio sites, Behance, Dribbble, and every premium e-commerce grid uses to guide clicks with typography instead of icons.

The lightbox and product-gallery classic: hover an image, a circular lens follows your pointer showing a 2.5× close-up of exactly what's under it. No canvas, no image duplication, no complex framework. Demo 06 in this collection uses two simple ideas stacked. First, the affordance is native. CSS ships cursor: zoom-in, zoom-out, and crosshair keywords for free. Layer a custom SVG loupe in front with cursor: url("loupe.svg") 12 12, zoom-in so it looks branded but degrades to the native keyword. Second, the payoff is a lens element with three properties: position: absolute, pointer-events: none (so it never intercepts the pointermove events you need from the image), and background-image set to the SAME photo the visible image uses, but with background-size: 250% so it's rendered at 2.5× scale. On pointermove you compute the pointer's position as a percentage of the image dimensions (px = (e.clientX - rect.left) / rect.width * 100) and set the lens's background-position to that same percentage. Because background-position in percentage terms is defined relative to the difference between container size and image size (the “overflow”), mapping pointer-% to position-% keeps the zoomed layer perfectly registered with the original — the lens always shows exactly what's underneath. The lens itself is positioned via transform: translate() to the pointer coordinates, with translate(-50%, -50%) to center it on the pointer. Zoom depth is one number: change background-size to 400% for deeper zoom, 200% for gentler. Keep pointer-events: none on the lens — without it the lens sits between the pointer and the image and swallows the events you need. Touch guard applies as always: on phones, dropping the lens and showing the plain image is the right behavior.

A custom cursor without accessibility guards is a bug for the ~40% of visitors who don't have a mouse or trackpad. Four disciplines cover the concerns. First, capability guards: every custom cursor lives inside @media (hover: hover) and (pointer: fine). hover: hover matches devices that can hover an element (mouse, trackpad) but not touch or stylus (which can't hover meaningfully). pointer: fine matches devices with precise pointers (mouse, trackpad) but not coarse pointers (finger, stylus). Both queries together mean “only apply this to mouse/trackpad users” — touch users keep the native caret and never end up with a stuck or invisible cursor. Second, reduced-motion respect: animated followers (Demo 02, 03, 05) are “animation from interaction” per WCAG 2.3.3 and should honor @media (prefers-reduced-motion: reduce). Every animated cursor in this collection detects it and restores the native cursor via { cursor: auto } + hides the follower layer via display: none. Third, never hide the native cursor without a replacement: cursor: none applied site-wide leaves users unable to see where they're pointing. Scope it to the EXACT area where a visible custom layer is rendered, and give that layer pointer-events: none so it never eats clicks. Fourth, keep interactive targets reachable without the cursor: drag-to-scroll carousels (Demo 04) and hover-badge galleries (Demo 05) are enhancements — every card must stay a real focusable link or button with a visible :focus-visible ring, 44×44px minimum touch target (WCAG 2.5.5), and semantic HTML that screen readers can navigate. Two more polish items: give decorative follower/badge layers aria-hidden="true" so screen readers don't announce them; give form inputs and text areas cursor: text back explicitly if you set a global custom cursor, so text-editing affordance never breaks. Every demo in this collection ships all four disciplines by default — copy the code, keep the guards, ship.

Four honest trade-offs. Bundle cost — Framer Motion (~60KB gzip once you include React DOM), GSAP (~23KB core + 5KB plugins, plus a $99/year Club GreenSock license for the paid plugins), react-tsparticles-cursor (~40KB), Aceternity UI's cursor components (~120KB with dependencies), Magic UI (~90KB), custom-cursor-react (~15KB). Every implementation in this collection is either 100% pure CSS (Demo 01, ~0.5KB) or CSS + under 30 lines of vanilla JavaScript (Demos 02-06, ~1-2KB each) — the entire collection totals under 12KB uncompressed of framework-free code. Framework lock-in — Framer Motion requires React. GSAP requires either React/Vue/Svelte adapters or vanilla with a specific API. Aceternity requires React + Radix + Tailwind + a specific project structure. custom-cursor-react is React-only. These 6 demos drop into any stack (Astro, Next.js, SvelteKit, Vue, Solid, Qwik, plain HTML, Rails ERB, Django templates, WordPress themes) with zero adaptation — the HTML + CSS + optional JavaScript panels are the whole delivery. Feature parity — everything Framer Motion, GSAP, or custom-cursor-react ships for cursor effects is in this collection: smooth follower (Demo 02), magnetic hover (Demo 03), custom art with fallback (Demo 01), drag cursors (Demo 04), text badges (Demo 05), magnifier (Demo 06). What they add beyond this: pre-styled components you can drop in without writing CSS, and a maintained upgrade path if browser APIs change. What they LACK compared to this collection: the pure-CSS baseline (Demo 01 works with zero JavaScript, none of the libraries offer that), the modern :has() hover pattern (Demo 03 uses 2023+ CSS to eliminate 50 lines of hover-state JavaScript), and the honest per-demo accessibility discipline (many library cursors ship without touch guards or reduced-motion respect and require you to layer them yourself). Accessibility floor — every demo here ships with capability guards, reduced-motion respect, focus-visible rings, aria-hidden decorative layers, and 44px touch targets by default. Library cursor components vary; some have solid a11y, some don't. That said — if you're already on React and Framer Motion, adding a follower cursor via motion.div + useMotionValue is 5 lines and reasonable. If you want to understand what a cursor system actually IS (not what the wrapper hides), or if you're framework-agnostic, copy these 6 demos and ship.

Yes on both. Every demo is MIT licensed — free for personal and commercial projects, no attribution required (though a link back to codefronts.com is always appreciated). Every demo is plain HTML + CSS + optional vanilla JavaScript with no build step, no framework wrapper, no dependencies. Drop the HTML into a React component's JSX (with className instead of class), a Vue single-file component's template, a Svelte component, an Astro island, or a SvelteKit page — the CSS ships as a scoped module, an inline <style> block, or a Tailwind arbitrary-value paste. React — use useEffect to attach the pointer handlers + start the requestAnimationFrame loop, and return a cleanup that cancels the RAF. React StrictMode double-mount is safe on every demo — cleanup functions properly cancel RAF loops. Vue 3 — use onMounted to attach handlers, onBeforeUnmount to clean up. Svelte / SvelteKit — onMount + onDestroy. Astro islands — wrap as client:load or client:visible since the cursor needs client-side interaction. Next.js App Router — mark the component 'use client'; there's no SSR concern because the cursor logic never runs on the server (all guarded behind capability queries that only match in a browser). SSR compatibility: every demo renders correctly on the server without hydration flash because the initial state has no follower visible (opacity: 0, revealed only on pointer enter). Content-Security-Policy: every demo works under strict CSP (script-src 'self' without 'unsafe-inline') because no demo uses inline onclick or inline <script> handlers — the JS runs from external files that the CSP allowlist can permit. Tailwind users: the CSS translates cleanly. cursor: url("...") becomes cursor-[url('...')] arbitrary value. pointer-events: none becomes pointer-events-none. mix-blend-mode: difference becomes mix-blend-difference. transform: translate() becomes translate-x-[...] translate-y-[...]. Every demo has been mentally tested at 320px / 600px / 1200px viewport widths per this site's responsive-first contract — the code you copy is the code that ships to your users at every width, and the touch guards mean mobile users automatically get the native cursor behavior.