1

I would like to change the tint of an emoji, e.g. if I have a yellow smiley, I would like to change its color tone so that it appears red.

This very naïve approach does not work:

.red-emoji {
  font-size: 2em;
  color: red;
}
<div class="red-emoji">this text is red, but that emoji is not → </div>

I would like to achieve this:

emoji tinted red

I made this image with Photoshop by adding an adjustment layer, I hope modern CSS has something similar (filters or something) that I can use to achieve this.

Patrick Hund
  • 19,163
  • 11
  • 66
  • 95
  • 2
    yes there is: https://stackoverflow.com/a/58450728/8620333 (filter and blend-mode) – Temani Afif Oct 24 '19 at 11:14
  • @TemaniAfif the emoji here is used inside the text, neither filter not blend-mode will be able to modify that to the desired result. Using a combination of filters is able to somewhat change the color but not to the specific desired result. blend-mode only works on backgrounds. – Luïs Oct 24 '19 at 11:20
  • 3
    @Luze you can wrap the emoji inside a span (like shown in the question I linked) and no, blend-mode doesn't work only on background (like shown in the question I linked too) – Temani Afif Oct 24 '19 at 11:21
  • @TemaniAfif I didn't know this was possible, thank you. – Luïs Oct 24 '19 at 11:23

0 Answers0