フリーランスwebデザイナーのwebデザインブログ

ちいさなwebデザインブログ CHIIWEB BLOG

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

背景と文字のグラデーション

この記事を書いている人

Marie

Marie

  • フリーランスwebデザイナー&講師
  • 2児ママ
  • 制作会社・インハウスデザイナーを経験し独立
  • オンラインwebデザイン教室ちいウェブ運営
  • 仕事の合間の息抜きに植物を育てています♡
もっと詳しくみる

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, #85FFBD, #FFFB7D);
}

角度をつける

背景です

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

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

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

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

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

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

.text-liner p {
 background: linear-gradient(25deg, #FA8BFF, #2BD2FF, #2BFF88);
 -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をコピーできるので、とても便利です。

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

コメントを残す

CAPTCHA


コメントは承認後に表示されます。

関連記事