How to create inner shadow effect on text in CSS?

Issue

I'm trying to convert a Figma design into code but it has some text that uses an inner-shadow effect

I tried to style it using plain and clipping the text-shadow CSS property but the result doesn't quite match the design in which the shadow kind of clips/insets the text.

h1 {
  font-family: 'Poppins';
    font-style: normal;
    font-size: 80px;
 
    text-align: center;
    
    color: #6225E6;
    text-shadow: -6px 0px 0px #D63737;
    background-color: #151717;
}

<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
<h1>This is some text<h1/>

Solution

You can get closer using mask (doesn't work in Firefox)

h1 {
  font-family: 'Poppins';
  font-size: 80px;
  letter-spacing: 5px;
  text-align: center;
  color: #0000;
  text-shadow: 
    5px 0  #6225E6,
    0 0  red;
  -webkit-mask: linear-gradient(#000 0 0);
  -webkit-mask-clip: text;
          mask-clip: text;
}

body {
  background:#000;
}

<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
<h1>This is some text<h1/>

For better support you can duplicate the text and try like below:

h1 {
  font-family: 'Poppins';
  font-size: 80px;
  letter-spacing: 5px;
  text-align: center;
  color: #0000;
  text-shadow: 
    5px 0 #6225E6, 
    0 0 red;
  position: relative;
}

h1:before {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  background: #000;
  color: #fff;
  mix-blend-mode: darken;
  text-shadow: none;
}

body {
  background: #000;
}

<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
<h1 data-text="This is some text">This is some text</h1>

Answered By - Temani Afif