Split emoji text effect with CSS

Thanks to some absolute positioning, hue-rotation, and even some clipping you can create nice split emoji:

I especially like the experiments near the lower part of the demo, where one emoji is used as a modifier for the other (e.g. the 🎩 is placed on top of 😁, yielding a new emoji). They remind me of this ingenious XKCD Comic on β€œthe vomiting emoji” (U+1F92E):

πŸ’₯ Did you know you can also create Emoji Silhouettes and/or Outlines? And did you know that some emoji wrap lines, and some don’t?

Join the Conversation

1 Comment

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.