How to custom cursor image that has white transparent background? - html

Question

I've uploaded a 40x40 square .png.
The square has a white transparent background.
What I would expect when using this image as a custom cursor is that hovering over the red block I would see a faint white transparent square.
What I would expect when hovering over the white block is nothing, as I would assume the square should be "invisible" due to transparent white going over white.
But that's not what we are seeing, the square is actually faintly grey. Where does this conversion come from? I've tried using SVG as well as png.
FIDDLE in case example is not working
https://jsfiddle.net/cx2gu5qb/
.block {
height: 200px;
width: 400px;
cursor: url('https://i.imgur.com/yuDNHeN.png'), auto;
}
.red {
background: red;
}
.white {
border: 1px solid black;
background: white;
}
<div class="block red"></div>
<div class="block white"></div>

Answer 1

The picture you were using in your code as the cursor value url("https://i.imgur.com/yuDNHeN.png") seemed to have a transparent background when opened inside a picture editor but that color was actually: HSV(0,0,100) alpha(128) and as such it's a white with an alpha channel that will blend with the background color below the picture.
So both on red and white colors it showed up as gray.
Well...on red I would expect that color to blend to gray but as you pointed out, on white it shouldn't.
So actually I'm not strictly answering your direct issue but I'm just bringing further evidence to the table that it probably depends on how the browser deal with it when computing the color interpolation.
I made a bunch of attempts using a different image for the cursor and implemented a code snippet where pressing the corresponding button will engage the given class name for each .block element that will set a different value for the cursor property. It includes your original cursor attempt and also a final try using a green transparent background instead of white.
Conclusion so far: not really a very conclusive answer that can explain correctly and in a definitive way how blending works.
First attempt - using a total transparent color
So I attempted to make a new picture from scratch having a transparent background and an opaque red frame for reference.
https://i.ibb.co/WgSYYNW/cursor2.png
As you can see when the cursor shows on the red box, it will look invisible and when you'll hover on the white box, the red frame will be visible.
This comparison is to show how to achieve the real transparency.
Second attempt - using a partially transparent color
Here I tried to use the same picture as before but using a white color with alpha: 130.
https://i.ibb.co/Pg1b6Z1/cursor3.png
And it behaves in the same exact way as your original post did while we expected the translucent white to blend as white over white.
function changeCursor(button){
document.querySelectorAll('.block').forEach(block => {
block.classList.forEach(c => {
if(c.startsWith('cursor'))
block.classList.remove(c);
});
const classname = button.dataset.classname;
block.classList.add(classname);
document.getElementById('status').innerText = `cursor class engaged: ${classname}`;
});
}
button{
display: block;
margin-bottom: .5rem;
cursor: pointer;
padding: .5rem;
}
#status{
border: solid 2px gray;
padding: 1em;
display: block;
width: fit-content;
}
.block {
height: 200px;
width: 400px;
}
.container{
margin: 1rem;
}
/*white alpha 128*/
.cursor1{
cursor: url("https://i.imgur.com/yuDNHeN.png"), auto;
}
/*white alpha 255*/
.cursor2{
cursor: url("https://i.ibb.co/WgSYYNW/cursor2.png"), auto;
}
/*white alpha 130*/
.cursor3{
cursor: url(https://i.ibb.co/Pg1b6Z1/cursor3.png), auto;
}
/*green alpha 75*/
.cursor4{
cursor: url(https://i.ibb.co/w0JYvM1/cursor4.png), auto;
}
.red {
background: red;
}
.white {
border: 1px solid black;
background: white;
}
<div class="container">
<button onclick="changeCursor(this);" data-classname="cursor1">Cursor: white alpha 128</button>
<button onclick="changeCursor(this);" data-classname="cursor2">Cursor: white alpha 255 w/ frame</button>
<button onclick="changeCursor(this);" data-classname="cursor3">Cursor: white alpha 130 w/ frame</button>
<button onclick="changeCursor(this);" data-classname="cursor4">Cursor: green alpha 128 w/ frame</button>
<div id="status"></div>
</div>
<div class="block red"></div>
<div class="block white"></div>

Answer 2

cursor: url('https://i.imgur.com/V8pXcSn.png'), auto;
Your are getting a different color because of the shadow.
I've checked this with popular browsers. The result was exactly the same one.
Check the below image
https://jsfiddle.net/j1wnxzgu/2/
Conclusion
The shadow uses drop shadow algorithm.
As in, the shadow's alpha is proportional to the images alpha channel.
With CSS, we can't change this behavior
Go for JavaScript solutions

Answer 3

If you will make your cursor full white, only then are you going to see the desired result. Like this: fiddle
.block {
height: 100px;
width: 200px;
cursor: url('https://i.imgur.com/V8pXcSn.png'), auto;
}
.red {
background: red;
}
.white {
border: 1px solid black;
background: white;
}
<div class="block red"></div>
<div class="block white"></div>
But if you try to make it transparent, your white color becomes something like #ffffff80 resulting in the greyish color.