【css】文字と背景にグラデーションをつける方法と便利ツール
4246
この記事を書いている人
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;をつけておきましょう
便利ツール
グラデーションを簡単につけるツールがあります。
クリックするだけでcssをコピーできるので、とても便利です。
角度やカラーも直感的に操作することが可能なので、特に色決めてないけど、いい感じのグラデーションを探してみようという時に便利です(笑)。
いいなと思ったら
TAPしてね♡↓
コーディング練習用デザイン素材 【css】写真の下に同サイズの長方形を配置する
コメントは承認後に表示されます。