How to create inner shadow effect on text in CSS?

Question

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/>

Temani Afif · Accepted Answer · 2022-07-18 14:13:14Z

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>

Andi · Accepted Answer · 2022-07-18 20:13:07Z

This kind of works, I guess depending on who is looking at it and what they're interpreting as the shadow versus the fill. The slight blur is me trying to throw the viewer off a bit but unfortunately, it doesn't give you much room to move the shadow either. I think any solution anybody comes up with is going to require some form of optical illusion to make it work.

body {
  background-color: #151717;
}

h1 {
  font-family: 'Poppins';
  font-style: normal;
  font-size: 120px;
  background-color: #D63737;
  color: transparent;
  letter-spacing: 2px;
  text-shadow: 2px 2px 1px #6225E6, 1px 1px 1px #D63737;
  -webkit-background-clip: text;
  -moz-background-clip: text;
  background-clip: text;
}

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

Laaouatni Anas · Accepted Answer · 2022-07-18 13:51:44Z

-1

added this CSS property called letter-spacing

that makes every letter have some little gap between them, so the shadow doesn't touch the other letters.

letter-spacing: 6px;

documentation: The letter-spacing CSS property sets the horizontal spacing behavior between text characters. This value is added to the natural spacing between characters while rendering the text. Positive values of letter-spacing causes characters to spread farther apart, while negative values of letter-spacing bring characters closer together.

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

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

answered Jul 18, 2022 at 13:51

Laaouatni Anas

4,0852 gold badges14 silver badges36 bronze badges

6 Comments

sedDev Over a year ago

Its better but it still doesn't solve the problem look at the "i" in the screenshot, its shadow does not exceed or goes past the text while in code it looks like that there are two separate i's one behind another.

Laaouatni Anas Over a year ago

@sedDev I think you can decrease the number, from -6px to -4px or less, maybe solve that. also the font-weight is different from figma, try use a smaller font-weight this seems medium font-weight in css. so change the <link> tag to this <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap" rel="stylesheet">

sedDev Over a year ago

Tried but didn't work. I think some kind of clipping is required here but cant figure how to do it here.

Laaouatni Anas Over a year ago

@Temani Afif added now an answer. seems literally what you want! good day! problem solved. but the solution isn't working on all browser, but it does the trick :)

sedDev Over a year ago

Yup, i'll figure something out.

|

Collectives™ on Stack Overflow

How to create inner shadow effect on text in CSS?

3 Answers 3

Comments

Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related