How to Achieve Inner Text Shadow with CSS?

Achieving Inner Text Shadow with CSS

Creating a text shadow effect inside the text can be a challenging task in CSS. While the box-shadow property allows for shadow rendering within the element, this capability does not extend to text.

However, a clever trick using the :before and :after pseudo-elements can circumvent this limitation. By setting the title attribute of the text element to the desired content and employing these pseudo-elements, you can create the illusion of an inner text shadow.

To achieve this effect, define :before and :after elements with the content taken from the title attribute. Position them absolutely within the text element, slightly offset from the original text to create the shadow effect. Style them with a transparent black color and opacity, such as rgba(255, 255, 255, .1), to blend them subtly with the background.

Here's an example code snippet demonstrating this technique:

<code class="css">.depth {
  position: relative;
  padding: 50px;
  font: bold 7em Arial, sans-serif;
  color: black;
}

.depth:before,
.depth:after {
  content: attr(title);
  padding: 50px;
  color: rgba(255, 255, 255, .1);
  position: absolute;
}

.depth:before {
  top: 1px;
  left: 1px
}

.depth:after {
  top: 2px;
  left: 2px
}</code>

<code class="html"><h1 class="depth" title="Lorem ipsum">Lorem ipsum</h1></code>

This technique allows you to achieve an inner text shadow effect, visually resembling the example you provided, without the need for Photoshop or extensive image manipulation.

The above is the detailed content of How to Achieve Inner Text Shadow with CSS?. For more information, please follow other related articles on the PHP Chinese website!