文字にグラデーションを付ける

こんな感じに文字にグラデーションをかけたくなりました

こんにちは～

こんな感じの CSS です
背景にグラデーションをかけて、文字を透明にするんですね

.text_grad {
  background: linear-gradient(to top,rgba(00, 80, 80, 0),#008080);
  -webkit-background-clip: text;
  color: transparent;
  font-size:40px;
}

  -webkit-background-clip: text;
  color: transparent;

を取り除くとこうなります

こんにちは～

background-clip ってのは「背景の適用範囲」ってプロパティらしいです
ちなみに -webkit-background-clip は Chrome に対応させるためのベンダープレフィックスです

こんな値があるみたいです

• border-box　背景をボーダーボックスに適用する（初期値）
• padding-box　背景をパティングボックスに適用する
• content-box　背景をコンテントボックスに適用する
• text　背景を前景のテキストの中に (切り取って) 表示する

それぞれ試してみるとこんな感じになります

枠の CSS はこんな感じ

.bg {
  width: 400px;
  margin-bottom:20px;
  padding: 0.5em;
  border: double 10px #faf2bb;
  background-color: #66ae3d;
  font-size: 40px;
  text-align: center;
}

• border-box

  .clip1{
    -webkit-background-clip: border-box;
  }
  

  こんにちは～
• padding-box

  .clip2{
    -webkit-background-clip: padding-box;
  }
  

  こんにちは～
• content-box

  .clip3{
    -webkit-background-clip: content-box;
  }
  

  こんにちは～
• text

  .clip4{
    -webkit-background-clip: text;
    color: transparent;
  }
  

  こんにちは～

  背景のグリーンが文字に沿って表示されます

色々面白いことができそうですね！！