Skip to main content

A CSS-only custom cursor

Create a custom cursor using CSS without external resources. Style your cursor like you do with a simple <div>!

Powered by CSS-in-SVG-in-CSS

html {
- adjust the width,height and viewbox to control the size
- minify your CSS
- change all the # to %23

cursor: url('data:image/svg+xml;utf8,<svg xmlns="" width="48" height="48" viewBox="0 0 48 48"><foreignObject width="100%" height="100%"><div xmlns="" class="c"></div>%3Cstyle%3E.c{ ADD YOUR CSS HERE }%3C/style%3E</foreignObject></svg>')
24 24 /* control the offset */ ,
auto; /* the fallback cursor */

See the Pen CSS only Custom cursor by Temani Afif (@t_afif) on CodePen.

More detail: