CODEWITHSUNDEEP
css
Marko
Marko

Reputation: 1487

How to create inset text shadow?

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

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:

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>

Upvotes: 6

Views: 4686

Answers (3)

benhatsor
benhatsor

Reputation: 2033

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>

Upvotes: 3

Błażej Zarzycki
Błażej Zarzycki

Reputation: 76

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.

Upvotes: 6

MaxiGui
MaxiGui

Reputation: 6348

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>

Upvotes: 0

Related Questions