CODEWITHSUNDEEP
cssunicodebackground-imagebackground-coloremoji
Yangshun Tay
Yangshun Tay

Reputation: 53169

CSS Background Text Clipping affecting emoji

I have some text rendering a gradient color via background clip: text, however the emojis are also affected and rendering the gradient, which is not my intention.

How do I make the emojis display in its original form?

p {
  background: linear-gradient(135deg, rgb(0, 229, 255), rgb(167, 151, 255), rgb(255, 143, 178));
  background-clip: text;
  font-family: sans-serif;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
<p>
  😺 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 😺 Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 👍🏿 Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 👨 Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>

Upvotes: 1

Views: 836

Answers (1)

Yangshun Tay
Yangshun Tay

Reputation: 53169

The trick here is to render a different text color for the emoji (anything but transparent should work). You can preprocess the text on the server or via JavaScript. Here's an example using JavaScript.

BEWARE OF XSS IF YOU USE .innerHTML

const EMOJI_REGEX = /(?:[\u2700-\u27bf]|(?:\ud83c[\udde6-\uddff]){2}|[\ud800-\udbff][\udc00-\udfff]|[\u0023-\u0039]\ufe0f?\u20e3|\u3299|\u3297|\u303d|\u3030|\u24c2|\ud83c[\udd70-\udd71]|\ud83c[\udd7e-\udd7f]|\ud83c\udd8e|\ud83c[\udd91-\udd9a]|\ud83c[\udde6-\uddff]|\ud83c[\ude01-\ude02]|\ud83c\ude1a|\ud83c\ude2f|\ud83c[\ude32-\ude3a]|\ud83c[\ude50-\ude51]|\u203c|\u2049|[\u25aa-\u25ab]|\u25b6|\u25c0|[\u25fb-\u25fe]|\u00a9|\u00ae|\u2122|\u2139|\ud83c\udc04|[\u2600-\u26FF]|\u2b05|\u2b06|\u2b07|\u2b1b|\u2b1c|\u2b50|\u2b55|\u231a|\u231b|\u2328|\u23cf|[\u23e9-\u23f3]|[\u23f8-\u23fa]|\ud83c\udccf|\u2934|\u2935|[\u2190-\u21ff])/g;

const string = '😺 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 😺 Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 👍🏿 Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 👨 Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.';
// MAKE SURE YOU UNDERSTAND THE POTENTIAL XSS ISSUE YOU WILL BE CAUSING BY USING innerHTML!
document.querySelector('p').innerHTML = string.replace(EMOJI_REGEX, `<span>$&</span>`);
p {
  background: linear-gradient(135deg, rgb(0, 229, 255), rgb(167, 151, 255), rgb(255, 143, 178));
  background-clip: text;
  font-family: sans-serif;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

span {
  -webkit-text-fill-color: initial;
}
<p></p>

Upvotes: 3

Related Questions