How can i apply text-shadow on my text in css?

Question

.text-shadow {
  text-shadow: 8px 12px 0px 0px rgba(0, 0, 0, 0.5);
}

<h1 class="text-shadow">hallo</h1>

it doesn't show a shadow and it also doesn't apply on the class

enter image description here

This is what the browser respond

can someone help me to fix the problem so the shadow work

I also tried it with filter: drop-shadow but it also doesn't work But other filters like blur work

Answer 1

Your text-shadow was incorrect.
Text-shadow doesn't take 5 options.
You should apply 2px 2px rgba(0, 0, 0, 0.5) or 2px 2px 2px rgba(0, 0, 0, 0.5).

:offset-x | offset-y | blur-radius | color

.text-shadow {
  text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
}

<h1 class="text-shadow">hallo</h1>

Answer 2

You have an invalid property value for text-shadow.

This property is specified as a comma-separated list of shadows.

Each shadow is specified as two or three 'length' values, followed optionally by a 'color' value. The first two 'length' values are the 'offset-x' and 'offset-y' values. The third, optional, 'length' value is the 'blur-radius'. The 'color' value is the shadow's color.

I am guessing that you don't want blur, so remove the two 0px values.

.text-shadow{
    text-shadow: 8px 12px rgba(0, 0, 0, 0.5);
}

<h1 class="text-shadow">hallo</h1>