Grey out emoji characters (HTML / CSS)

If you're looking to just change the Emoji colour to grey, you can do so using filter: grayscale:

<button style="filter: grayscale(100%);" disabled>&#127912;_myText</button>

<p style="color:grey; filter: grayscale(100%);">&#128078;_myText2</p>

As a side note, I suggest you use HTML entities for representing Emojis. Not all text editors support Emojis and so they may become corrupt if opened in one. You can use this unicode lookup to find the HTML entity version of your Unicode characters.

If you wish to colour your Emojis in other colours see this answer


You can use text shadow

 <button disabled> 🎨_myText </button>

    <p style="color:transparent; text-shadow: 0 0 0 grey;">
      👎_myText2
    </p>