Search code examples
htmlcsscolorsemoji

Grey out emoji characters (HTML / CSS)

My current issue is that I am trying to grey out a button with emojis in it.

Nevertheless it seems that, due the nature of emojis, it is not possible to change the color using HTML / CSS properties.

I.e.:

<button disabled> 🎨_myText </button>

<p style="color:grey">
  👎_myText2
</p>

Solution

  • 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>🎨_myText</button>

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

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