How to create inset text shadow?

Question

How can I create inset shadow on text? Here is what I am trying to achieve

I am creating this in Figma, on text I have added both drop shadow and text shadow. It seems that Figma only shows source code for drop shadow. Can I achieve inner shadow as well? Values in Figma are these:

x:0
y:4
blur:4
spread:0
color: #000
percentage:25%

h1 {
font-size: 6rem;
margin-bottom: 1rem;
text-shadow: -1px -1px 7px rgba(0,0,0,.2), -1px -1px 2px rgba(255,255,255,.6);
color: #C92929;
text-align: center;
}

<h1>Lorem ipsum</h1>

Błażej Zarzycki · Accepted Answer · 2020-10-18T11:52:20.473

4

In CSS you can experiment with transparency of text color and its shadow. For example:

h1 {
  color: rgba(201, 41, 41, 0.8);
  text-shadow: 0px 4px 4px #fff, 0 0 0 #000, 0px 4px 4px #fff;
  font-size: 6rem;
  margin-bottom: 1rem;
  text-align: center;
}

<h1>Lorem ipsum</h1>

I think, the main problem is calculate that values of colors, to receive advisable effect.

edited Oct 18 '20 at 11:52

answered Oct 18 '20 at 09:43

Błażej Zarzycki

56
5

Is it not possible to make it full red? – Marko Oct 19 '20 at 11:03
For that solution unfortunately no, because it requires transparency to show the shadow. – Błażej Zarzycki Oct 20 '20 at 11:28
This is what I'm looking for, but I don't understand why it works. How is the outer shadow being suppressed? – robm Feb 09 '22 at 04:18

score 2 · Answer 2 · answered Oct 18 '20 at 15:30

2

We make a blurred white text-shadow, and a black text-shadow, while making the color of the text transparent. This can give the illusion that the text-shadow is inset... There is no such property, though.

h1 {
  color: transparent;
  text-shadow: 0px 4px 4px #fff, 0 0 0 #000, 0px 4px 4px #fff;
  font-size: 6rem;
  margin-bottom: 1rem;
  text-align: center;
}

<h1>Lorem ipsum</h1>

answered Oct 18 '20 at 15:30

benhatsor

1,863
6
20

it needs to be red – Marko Oct 19 '20 at 11:03

score 0 · Answer 3 · edited Oct 18 '20 at 10:44

You can try with transparency as subject here and the code below:

I know result is not the one you expect, because I did not change your shadow. But this the way I use transparantrency that is important.

h1 {
  font-size: 3rem;
  margin-bottom: 1rem;
  text-shadow: 0px 0px 7px rgba(0,0,0,.2), 0px 0px 2px rgba(255,255,255,.2);
  text-align: center;
  background: white;
}
span{
  background: #C92929;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  display:block;
}

<h1><span>Lorem Ipsum</span></h1>

How to create inset text shadow?

3 Answers3