【CSS】CSSだけでおしゃれな表現 小技集（備忘録）

CSSだけでおしゃれな表現　小技集（備忘録）
※どんどん追加していく所存

1.テキストの背景をグラデーションにする方法

html

<p>This is dummy sentence</p>

css

p {
display: inline-block;
background: linear-gradient(100deg, #008000, #000080 48%, #fcbbbb 90%);
 -webkit-background-clip: text;
background-clip: text;
 -webkit-text-fill-color: transparent;
font-size: 36px;
}

See the Pen Text gradation by Kazuhito Nakayama (@kazuhito-nakayama) on CodePen.