How To Create Invisible Ink Using CSS

Invisible Ink was once used a lot by spies to communicate privately with each other. Nowadays it's used as entertainment for little children who like using invisible ink to send secret messages to each other. In this tutorial, I will teach you how to create your own invisible ink using some simple CSS rules. We will assume that you have a paragraph element with the id "layer1",

The CSS:

#layer1::selection{
color:rgba(0,200,255,1);
background-color:#f0f0f0;
}
#layer1::-webkit-selection{
color:rgba(0,200,255,1);
background-color:#f0f0f0;
}
#layer1::-moz-selection{
color:rgba(0,200,255,1);
background-color:#f0f0f0;
}
#layer1::-ms-selection{
color:rgba(0,200,255,1);
background-color:#f0f0f0;
}
#layer1::-o-selection{
color:rgba(0,200,255,1);
background-color:#f0f0f0;
}
#layer1{
position:relative;
color:rgba(0,0,0,0);
left:0px;
top:0px;
}

Result (Select the invisible text in the box below):

You Have Found The Secret! Using the CSS ::selection pseudo element, we can make invisible ink in HTML! Just set the element to be invisible initially, and then add a CSS rule that makes it visible using the ::selection pseudo element

The Vendor Prefixes,-webkit-,-moz-,-ms-, and -o- are used to add support for older versions of the respective browsers

»

Images Used:

https://api.sololearn.com/uploads/Modules/1023/1219.png
https://i.ytimg.com/vi/-0VCZK9_yao/maxresdefault.jpg
http://www.clker.com/cliparts/2/k/n/l/C/Q/transparent-green-checkmark-md.png
https://www.freeiconspng.com/uploads/x-png-23.png

Invisible Ink using CSS