Create a text with inner shadow effect and transparent background.

by AJIEKCEU

HTML

<div class="container">
  <h1 class="yohoho">С Днем Yohoho!</h1>
  <!-- Невидимый фильтр -->
  <svg width="0" height="0" style="position:absolute;">
    <filter id="inner-glow" x="-20%" y="-20%" width="140%" height="140%">
      <!-- Создаем маску внутри букв -->
      <feMorphology operator="erode" radius="1" in="SourceAlpha" result="shrunk" />
      <feGaussianBlur stdDeviation="3" in="shrunk" result="blur" />
      <feComposite operator="out" in="SourceAlpha" in2="blur" result="glow" />
      <!-- Цвет свечения (красный) -->
      <feFlood flood-color="#ff4d4d" result="color" />
      <feComposite operator="in" in="color" in2="glow" result="final-glow" />
      <!-- Накладываем свечение на белые буквы -->
      <feMerge>
        <feMergeNode in="SourceGraphic" />
        <feMergeNode in="final-glow" />
      </feMerge>
    </filter>
  </svg>
</div>

CSS

.yohoho {
  font-family: 'Arial Black', sans-serif;
  font-size: 80px;
  color: #fff; /* Белый цвет букв */
  text-transform: uppercase;

  /* Применяем фильтр */
  filter: url(#inner-glow);
}