【css】文字と背景にグラデーションをつける方法と便利ツール

この記事を書いている人

Marie

• フリーランスwebデザイナー＆講師
• 制作会社・インハウスデザイナーを経験し独立
• オンラインwebデザイン教室ちいウェブ運営
• 仕事の合間の息抜きに植物を育てています♡
• スプラ・DIY・将棋がすき
• 小4・年長の母

もっと詳しくみる

cssでグラデーションをつけられますが、文字にもつけられます。

今回は両方の使い方を書いてみます。

背景にグラデーションをつける

<div class="bg-linear">
 背景です
</div>

上から下に向かうグラデーション

.bg-linear {
  background: linear-gradient(#FFDEE9, #B5FFFC);
}

backgroundにlinear-gradientを指定して、単純に2つカラーを書きます。

そうすると、上から下に向かうグラデーションになります。

色を足すことで、色数が増えます。

.bg-linear {
  background: linear-gradient(#FFDEE9, white, #B5FFFC);
}

左から右に向かうグラデーション

左から右に向かう時に、to rightをつけます。

.bg-linear {
 background: linear-gradient(to right, #9ba394, #fff);
}

角度をつける

最初に、degを追加するだけです＾＾

.bg-linear {
 background-image: linear-gradient(25deg, #FA8BFF, #2BD2FF, #2BFF88);
}

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

背景だけではなく、文字もグラデーションにすることができます。

先ほどと同じように、まずは背景をグラデーションにして、文字型に切り抜くみたいなイメージです。

.text-liner p {
 background: linear-gradient(25deg, #758b8a, #cdd1b0, #9ba394);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 display: inline-block;
}

背景グラデーションを指定した後、以下の2つを追加すればOKです。

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

pタグは、ブロック要素なので、何もしなければ横100%の幅を持ちます。

なので、グラデーションを指定した時に、文字の端から端までの色を指定したい場合は、併せてdisplay: inline-block;をつけておきましょう

便利ツール

グラデーションを簡単につけるツールがあります。

Grabient

クリックするだけでcssをコピーできるので、とても便利です。

角度やカラーも直感的に操作することが可能なので、特に色決めてないけど、いい感じのグラデーションを探してみようという時に便利です（笑）。