cssでグラデーションをつける

2024年2月6日2024年2月22日

はじめに

HTML・CSSについて学習時、ボタンデザインのサンプル集などを見る機会が増えるようになって感じるようになったこと。

cssで文字やボタンのデザインにグラデーションにすることなんてあります？

少なくともわたしがこれまで閲覧してきたWebページには文字やボタンにグラデーションがかかっていた記憶がない…グラデーションをかけた実装サンプルは必要？とずっと思っていました（実装サンプル集を出している皆さま、ごめんない…。）

しかし、ある日のこと。その考えが一変！

娘から貯めたお小遣いで推しグッズを購入したい！とメモを渡され、指定されたページを確認して衝撃を受けました。
衝撃を受けたサイトがこちら ( ･∀･)つ

STPR ONLINE STORE

ヘッダーロゴとボタンデザインでグラデーションがかかっている(；ﾟДﾟ)
むしろこのグラデーションがかかっていることでブランドの効果がよりよく現れている‼️と感心してしまいました。

ということで、これを機にcssで文字にグラデーションをかける方法とグラデーションをかけたボタンデザインを改めて学ぶことにしました。

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

【html】

<p class="text">松の実生えの臼になるまで</p>

【css】

.text {
    font-size: 60px;
    font-weight: bold;
    background-image: linear-gradient(45deg, #e95364 0%, #f7b877 33%, #b7272d 66%);
    -webkit-background-clip: text;
    color: transparent;
    display: inline-block;
}

background-image: liner-gradient(): 背景にグラデーションを適用する
-webkit-background-clip: text: 背景を文字の形に切り取る
color: transparent;: 文字色を透明にする

ブロック要素で文字にグラデーションをつけたい場合は、display: inline-block
背景のグラデーションが親要素（画面）いっぱいに広がってしまい、文字がグラデーションのほんの一部分にしか重ならず、文字全体にグラデーションが反映されないため

グラデーション背景のボタン

【html】

<div class="test-button">
    <a href="#" class="test-button-sample">ボタンを押してください</a>
</div>

【css】

.test-button-sample {
    display: inline-block;
    padding: 24px 32px;
    text-decoration: none;
    border-radius: 8px;
    font-weight: bold;
    color: #fefefe;
    background-image: linear-gradient(60deg, #72ae2c 15%, #22572b 100%);
    transition: .4s;
}

.test-button-sample:hover {
    background-image: linear-gradient(60deg, #02983b 20%, #99cc81 100%);
}