備忘録）css3のテキストグラデーション

参考を見ながら適用しようとしたら詰まったのでメモ

概要

参考を見て試すも
background-clip: text;が適用されず文字抜きが上手く表示されなかった

原因・結果

backgroundセレクターでは反映されず、background-image又はbackground-textでは反映されるみたい

style.css

 /*-- NG --*/
.textGr{
  color: #ae9b7a;
  background: linear-gradient(90deg, rgba(174,155,122,1) 0%, rgba(255,241,215,1) 50%, rgba(174,155,122,1) 100%);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  display: inline-block;
}

 /*-- OK --*/
.textGr{
  color: #ae9b7a;
  background-image: linear-gradient(90deg, rgba(174,155,122,1) 0%, rgba(255,241,215,1) 50%, rgba(174,155,122,1) 100%);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  display: inline-block;
}

参考先