linear-gradient

グラデーションテキストで華やかに。

テキストをグラデーションで華やかにしてみましょう。

わくわくパン屋さん

上記の仕組みは、「グラデーションのエリア」を作り、そこへbackground-clipを使って文字をくり抜きます。文字色も、transparent(透明色)に指定することで、バックのグラデーションが透けて見える仕組みです。linear-gradientでいろんなグラデーションを試してみてください。background-clipが適用できるのはbackground-imageとbackground-colorのみです。

.gradient-text {
background: linear-gradient(90deg, #5804ff, #ff00ae); /* 好きな配色に変更 */
background-size: 100% auto;
background-clip: text;
color: transparent;
display: inline-block;
}