带阴影的渐变色文字

如果直接使用 text-shadow 实现文字阴影会出现阴影浮在文字上边的问题。这是因为渐变色文字是背景色实现的。

所以阴影需要改用 filter 属性实现。

.text {
  color: transparent;
  background-image: linear-gradient(45deg, gold, purple, cyan, deeppink);
  -webkit-background-clip: text;
          background-clip: text;
  
  filter: drop-shadow(#0ff 10px 10px 5px);
}