Custom cursor image low quality and too pixelated

Site URL: https://www.quelle.cool/

G'day, I've added custom cursors to my site but the image quality is terrible and they end up really pixelated with altered colors. I made the cursors in AI at 30px height.  Is there any way to improve the quality of my cursors or is it possible to make them larger images and then size them down in CSS? I used the code below:

#collection-x {
  cursor: url(x), auto!important;
}

#collection-x {
  cursor: url(x), auto
  }}

My site is www.quelle.cool/

23 hours ago, quellecool said:

Site URL: https://www.quelle.cool/

 

G'day, I've added custom cursors to my site but the image quality is terrible and they end up really pixelated with altered colors. I made the cursors in AI at 30px height.  Is there any way to improve the quality of my cursors or is it possible to make them larger images and then size them down in CSS? I used the code below:

 

#collection-x {
  cursor: url(x), auto!important;
}

#collection-x {
  cursor: url(x), auto
  }}

 

 

My site is www.quelle.cool/

What is the image you used to create the cursor?

On 5/9/2021 at 10:12 AM, quellecool said:

Site URL: https://www.quelle.cool/

 

G'day, I've added custom cursors to my site but the image quality is terrible and they end up really pixelated with altered colors. I made the cursors in AI at 30px height.  Is there any way to improve the quality of my cursors or is it possible to make them larger images and then size them down in CSS? I used the code below:

 

#collection-x {
  cursor: url(x), auto!important;
}

#collection-x {
  cursor: url(x), auto
  }}

 

 

My site is www.quelle.cool/

I'm having this issue too but haven't found a solution sadly.