CSS Character Styling Using Background-Clip

In Grace Omele’s article “How to Apply CSS to HalfStyle a Character or a Text” she covers a “plugin” to aid in styling text. Whilst the concept is good, the execution leaves a lot to be desired in that the scripting it uses is utter junk, and the technique used is brute forcing stuff that CSS can actually do all on its own with linear-gradient and background-clip!

The Problems

1. It creates duplicates of every character layered atop each-other with absolute positioning and overflow:hidden to clip off the parts. Ttthhhiiisss rrreeesssuuullltttsss iiinnn nnnooonnn — -vvviiisssuuuaaalll uuussseeerrr aaagggeeennntttsss rrreeeaaadddiiinnnggg yyyooouuurrr ttteeexxxttt llliiikkkeee ttthhhiiisss…Not exactly a desirable behavior.
2. For top to bottom shading of that type, we don’t actually need JavaScript’s help! Quite literally just set a linear gradient top to bottom and then set background-clip:text; (and its -webkit equivalent)
3. Not only is the scripting many times larger than need be because of this, it’s the typical poorly written schlock one can expect from the train wreck laundry list of how NOT to write JavaScript that is jQuery. It was derpy incompetent trash when it was introduced 15 years ago, it’s mind-numbingly dumbass garbage as of 2021. How that smelly brainfart ever became popular escapes me.

Really to me, if you need a “plugin” that’s 2k of scripting and 7k of CSS to do this, well… something’s wrong. Not that this is entirely on the original creator of said “plugin” — Arbel Hakopian — given that when it was written — apparently 2014 — a lot of the fancy CSS features we can leverage — like background-clip — weren’t even real-world deployable.

Even so, it’s very much the type of mess I’ve come to expect from the folks who were suckered by the disaster of dumbassery that are “frameworks” like jQuery, Angular, React, Vue, etc.

Doing It Better

All we really need to do to fix the problem is — as I said — to apply background-style and background-clip.

Note, all the following code assumes a reset is in use.

For example, a top to bottom linear gradient:

<p class=”test”>To Bottom…