[css] Inner text shadow with CSS

I've seen many of the proposed solutions, but none were quite what I was hoping.

Here's my best hack at this, where the color is transparent, the background and the top text-shadow are the same color with varying opacities, simulating the mask, and the second text-shadow is a darker, more saturated version of the color you actually want (pretty easy to do with HSLA).

enter image description here

(btw, text and styling based upon a dupe thread's OP)

Examples related to css

need to add a class to an element Using Lato fonts in my css (@font-face) Please help me convert this script to a simple image slider Why there is this "clear" class before footer? How to set width of mat-table column in angular? Center content vertically on Vuetify bootstrap 4 file input doesn't show the file name Bootstrap 4: responsive sidebar menu to top navbar Stylesheet not loaded because of MIME-type Force flex item to span full row width

Examples related to text

Difference between opening a file in binary vs text How do I center text vertically and horizontally in Flutter? How to `wget` a list of URLs in a text file? Convert txt to csv python script Reading local text file into a JavaScript array Python: How to increase/reduce the fontsize of x and y tick labels? How can I insert a line break into a <Text> component in React Native? How to split large text file in windows? Copy text from nano editor to shell Atom menu is missing. How do I re-enable

Examples related to shadow

How to remove button shadow (android) Android "elevation" not showing a shadow Android View shadow box-shadow on bootstrap 3 container How to provide shadow to Button What's the best way to add a drop shadow to my UIView How can I add a box-shadow on one side of an element? Shadow Effect for a Text in Android? Inner text shadow with CSS iPhone UILabel text soft shadow