CSS Текст с линейным градиентом, тенью и текстовым контуром?

Question

Можно ли создать текст с линейным градиентом, тенью и контуром.

Моя проблема в том, что для градиента требуется "-webkit-text-fill-color: transparent", поэтому тень находится поверх текста.

Возможно ли получить текст поверх тени?

Вот мой код:

p {
  font-size: 100px;
  background: linear-gradient(to bottom, red, blue);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 2px black;
  text-shadow: 15px 15px black; 
    }

<p>Some Text</p>

Answer 1

Попробуйте это:

p {
  font-size: 100px;
  background: linear-gradient(to bottom, red, blue);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 2px black;
  filter: drop-shadow(15px 15px black);
}

<p>Some Text</p>

, поэтому вы перезаписываете текстовую тень

Снимок экрана с результатом

Answer 2

Вы можете использовать код как показано ниже:

p {
color: black;
background: -webkit-linear-gradient(#1de268, #4662FF);
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color:#FF8802;
-webkit-text-fill-color:transparent;
-webkit-background-clip: text;
text-shadow: 0px -8px 2px rgba(0,0,0,0.25);
}

Answer 3

Привет Пожалуйста, взгляните на фрагмент кода, может он вам поможет

p {
  color: blue;
  font-size: 100px;
  background: linear-gradient(to bottom, red, blue);
  -webkit-background-clip: text;
  -webkit-text-fill-color: rgba(255,255,255,0.3);
  -webkit-text-stroke: 2px black;
   text-shadow: 15px 15px 2px rgba(0,0,0,0.9); 
}
    

<p>Some Text</p>

Answer 4

Вы меняете свойство тени. Вместо использования text-shadow попробуйте:

filter: drop-shadow(15px 15px black);

Answer 5

Да, дорогой, вы можете придать своей тени отрицательное значение. например = текстовая тень: -3px -5px черный;