chriskirknielsen, 7 months ago

@j3j5 Couple of tricks you can use. Any old block, you can apply a pseudo above the element and apply backdrop-filter. For an input that's tough as pseudo-elements might not be available, but you could blur the text by making the color transparent, and adding text-shadow with a blur amount.

See demo: https://codepen.io/chriskirknielsen/pen/xxmvzpz?editors=1100

j3j5, 7 months ago

@chriskirknielsen Thank you very much! text-shadow with color: transparent is so far the best solution. I've added some pixels on offset-x on text-shadow to make the blurring a bit smoother, but otherwise, this solution is perfect.
Thanks again!

chriskirknielsen, 7 months ago

@j3j5 Glad I could help! Yeah the text shadow is kind of "trimmed" to the input edges.
Just use it responsibly! :D

j3j5, 7 months ago

@chriskirknielsen haha, indeed, I'm very aware this is only "cosmetic" security, but it adds an extra layer to avoid over-the-shoulder peeking :P

mattwilcox, 7 months ago

@j3j5 https://developer.mozilla.org/en-US/docs/Web/CSS/mask-clip for clipping. Unsure how it interacts with filter. There's also https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path

j3j5, 7 months ago

@mattwilcox yeah, I tried mask-clip but didn't manage to make it work. Same with clip-path, it removes the border because it hides whatever I try. The best solution is the one suggested by @chriskirknielsen on another reply using color: transparent and text-shadow with blur.