用css给文字加渐变和投影效果

template

<h1 :style="{'--text': `'${name}'`}"><span>{{name}}</span></h1>

style

h1 {
  position: relative;
  z-index: 1;
  width: 100%;
  font-size: 42px;
  letter-spacing: 6px;
  text-align: center;
  font-weight: bolder;
}
h1 span {
  position: absolute;
  z-index: 2;
  background: linear-gradient(#fff, #b7e6f5);
  background-clip: text;
  color: transparent;
  transform: translateX(-50%);
}
h1::after {
  position: absolute;
  z-index: 1;
  left: 50%;
  content: var(--text);
  color: transparent;
  text-shadow: 0 0 20px rgba(0,0,0,0.5);
  transform: translateX(-50%);
}