CSS Tip

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="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><foreignObject width="100%" height="100%"><div xmlns="http://www.w3.org/1999/xhtml" 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: verpex.com/blog/website-tips/creating-a-custom-cursor-using-css

More CSS Tips