When I nest text-shadow, how to inherit the color of the shadow?

Admin 1
Viewed 244

I have text with such shadow effects applied.

span.inner_text {
  text-shadow: 5px 5px 5px red;
}
<span class="inner_text">It's a simple text</span>

Q1. We used text-shadow for the parent element, as we needed to add shadows to this. Then the parent element text-shadow did not work. Why is this? And how can I nest shadows?

p {
  text-shadow: 15px 15px 15px blue; /* blue shadow disappeared */
}

span.inner_text {
  text-shadow: 12px 12px 5px red;
}
<p>
  <span class="inner_text">It's a simple text</span>
</p>

Q2.

Next, I used drop-shadow for the parent element. Then the shadow of the p element disappeared. Why is this? And how can I nest shadows?

div {
  filter: drop-shadow(30px 10px blue);
}

p.inner_text {
  text-shadow: 5px 5px 5px red; /* red shadow disappeared */
}
<div>
  <span class="inner_text">It's a simple text</span>
</div>

box-shadow css
2 Answers

For the Q1, add some text inside p and you will better understand

p {
  text-shadow: 15px 15px 15px blue; /* blue shadow disappeared */
}

span.inner_text {
  text-shadow: 12px 12px 5px red;
}
<p>
  <span class="inner_text">It's a simple text</span> some text here
</p>

The blue shadow applies to the text inside p but for the text inside span we consider the shadow of the span.

It behave exactly like color. Only one text-shadow is used.

p {
  color:blue;
}

span.inner_text {
  color:red;
}
<p>
  <span class="inner_text">It's a simple text</span> some text here
</p>

If you want multiple shadows, they need to belong to the same property either on the parent or the child element since it's an inherited property. Simply pay attention to the order (The shadow effects are applied front-to-back: the first shadow is on top)

p {
  text-shadow: 
    15px 15px 15px blue,
    12px 12px 5px red; 
}

span.inner_text {
 
}
<p>
  <span class="inner_text">It's a simple text</span>
</p>

For the Q2 you simply have a typo as you have no p element and you are targetting a p element:

div {
  filter: drop-shadow(30px 10px blue);
}

p.inner_text {
  text-shadow: 5px 5px 5px red; 
}
<div>
  <p class="inner_text">It's a simple text</p>
</div>

user_86203330

Try this

CSS

span.inner_text {
  text-shadow: 12px 12px 5px inherit;
}

Use the CSS inherit property value to inherit the property of parent color.

user_116904430
Related