skip to Main Content
.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

2

Answers


  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>
    Login or Signup to reply.
  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>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search