--- title: Don’t use custom CSS mouse cursors | daily.dev description: Custom CSS cursors, loaded via the cursor property's url() function, override a user's OS-level cursor accessibility settings such as size and high-contrast... canonical: https://daily.dev/posts/don-t-use-custom-css-mouse-cursors-4y6igmteb twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Don’t use custom CSS mouse cursors | daily.dev og:description: Custom CSS cursors, loaded via the cursor property's url() function, override a user's OS-level cursor accessibility settings such as size and high-contrast... og:url: https://daily.dev/posts/don-t-use-custom-css-mouse-cursors-4y6igmteb og:image: https://api.daily.dev/og/posts/4y6IgmTEb.png og:image:alt: Don’t use custom CSS mouse cursors og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # Don’t use custom CSS mouse cursors **[Eric Bailey](https://daily.dev/sources/ericwbailey)** · 6 min read · 0 upvotes · 0 comments ## Summary Custom CSS cursors, loaded via the cursor property's url() function, override a user's OS-level cursor accessibility settings such as size and high-contrast modifications. This creates barriers for people with low vision, disrupts digital literacy expectations built on cursor consistency across the web, and adds unnecessary download weight for a feature that carries significant usability risk. The recommendation is to avoid custom cursors entirely, or at minimum test extensively with people who have low vision, low tech literacy, or unfamiliarity with the interaction metaphor before shipping one. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Questions this post answers ### Why is using a custom CSS cursor bad for accessibility? Custom CSS cursors, set via the cursor property's url() function on the html or body element, override a user's OS-level cursor accommodations like increased size or high-contrast styling. For someone with low vision who relies on these settings, the cursor can effectively disappear, making the site unusable. It also disrupts digital literacy by breaking a consistent OS-wide interaction pattern. _daily.dev surfaces accessibility-focused CSS discussions for developers weighing cursor customization trade-offs._ ### What counts as a custom CSS cursor versus normal cursor state changes? A custom cursor replaces the OS cursor entirely using CSS's url() function inside the cursor property, whereas normal state changes like a pointing hand for links, resize handles, or text-entry indicators borrow standard OS-level affordances without removing them. The former overrides user accessibility settings; the latter helps users understand how a web UI element can be interacted with, consistent with their OS experience. _developers debating cursor styling choices can track accessibility guidance on daily.dev._ ## Similar posts on daily.dev - [Chris’ Corner: Cursors](https://daily.dev/posts/chris-corner-cursors-cibqgrft7) · CodePen · 43 upvotes · 0 comments - [Don't Roll Your Own ...](https://daily.dev/posts/don-t-roll-your-own--gpx1gv2zh) · Susam Pal · 0 upvotes · 0 comments - [Cursor for UI work](https://daily.dev/posts/cursor-for-ui-work-fg1pxq6db) · Kitty says hi. · 96 upvotes · 4 comments --- Tags: [#css](https://daily.dev/tags/css), [#ux](https://daily.dev/tags/ux), [#accessibility](https://daily.dev/tags/accessibility) [View this post on daily.dev](https://daily.dev/posts/don-t-use-custom-css-mouse-cursors-4y6igmteb) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"Don’t use custom CSS mouse cursors","url":"https://daily.dev/posts/don-t-use-custom-css-mouse-cursors-4y6igmteb","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/don-t-use-custom-css-mouse-cursors-4y6igmteb"},"datePublished":"2026-09-20T07:43:53.320Z","dateModified":"2026-09-20T07:45:06.897Z","description":"Custom CSS cursors, loaded via the cursor property's url() function, override a user's OS-level cursor accessibility settings such as size and high-contrast...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/f6d1f76c616e14cba5204340917ac61d?_a=AQAEuop","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/f6d1f76c616e14cba5204340917ac61d?_a=AQAEuop","isAccessibleForFree":true,"articleSection":"Eric Bailey","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Eric Bailey","logo":"https://media.daily.dev/image/upload/s--r1vwe6z1--/f_auto,q_auto/v1789890198/logos/ericwbailey?_a=BAMAMicg0","url":"https://daily.dev/sources/ericwbailey"},"commentCount":0,"discussionUrl":"https://daily.dev/posts/don-t-use-custom-css-mouse-cursors-4y6igmteb","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":0},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"css,ux,accessibility","timeRequired":"PT6M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Eric Bailey","item":"https://daily.dev/sources/ericwbailey"},{"@type":"ListItem","position":3,"name":"Don’t use custom CSS mouse cursors"}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/don-t-use-custom-css-mouse-cursors-4y6igmteb#faq","mainEntity":[{"@type":"Question","name":"Why is using a custom CSS cursor bad for accessibility?","acceptedAnswer":{"@type":"Answer","text":"Custom CSS cursors, set via the cursor property's url() function on the html or body element, override a user's OS-level cursor accommodations like increased size or high-contrast styling. For someone with low vision who relies on these settings, the cursor can effectively disappear, making the site unusable. It also disrupts digital literacy by breaking a consistent OS-wide interaction pattern. daily.dev surfaces accessibility-focused CSS discussions for developers weighing cursor customization trade-offs."}},{"@type":"Question","name":"What counts as a custom CSS cursor versus normal cursor state changes?","acceptedAnswer":{"@type":"Answer","text":"A custom cursor replaces the OS cursor entirely using CSS's url() function inside the cursor property, whereas normal state changes like a pointing hand for links, resize handles, or text-entry indicators borrow standard OS-level affordances without removing them. The former overrides user accessibility settings; the latter helps users understand how a web UI element can be interacted with, consistent with their OS experience. developers debating cursor styling choices can track accessibility guidance on daily.dev."}}]} ```