Color for Unicode Emoji

html css unicode emoji

mahemoff · Sep 5, 2015 · Viewed 37.4k times · Source

It's possible to include Emoji characters in modern browsers, but how can one make it a single color and choose that color?

For example, here is some Emoji and some regular (plane 0) Unicode symbols. All should be red, but only the symbols are rendered in red.

Associated HTML + CSS:

<p>
  🐘🐧🐼
</p>
<p>
  ♥★ℹ
</div>

p {
  font-size: 3em;
  color: red
}

Answer

Yes, you can color them!

div {
  color: transparent;  
  text-shadow: 0 0 0 red;
}

<div>🚀🎭😻</div>