【コピペで使用OK！】CSSでテキスト(文字)をグラデーションにする方法！おしゃれなグラデーション見本付き

2024年9月12日

misa

こんにちは、ウェブデザインパレットのmisaです。

今回は、CSSでテキスト（文字）をグラデーションにする方法について解説します。

また、後半ではおしゃれなグラデーション例もご紹介しています。

HTMLとCSSのみで簡単に実装できるので、ぜひみなさんもやってみてくださいね。

Contents

CSSでテキストをグラデーションにする方法

Web Design Pallet

HTML

<p class="text-gradation">Web Design Pallet</p>

CSS

.text-gradation {
  display: inline-block;
  font-family: "Roboto", sans-serif;
  font-size: 52px;
  font-weight: bold;
  background: linear-gradient(to right, #fa709a, #fee140);
  -webkit-background-clip: text;
  color: transparent;
}

misa

コピペして使ってくださいね♩

background-imageプロパティでテキストの背景にグラデーションを適用し、-webkit-background-clipプロパティを使ってテキストの形にくり抜くことで、テキスト自体をグラデーションに見せでいます

background: linear-gradient(to right, #fa709a, #fee140);
- グラデーションの方向と色を指定します。
  この例では、左から右に向かってピンクからイエローのグラデーションを設定しています。
-webkit-background-clip: text;
- 背景をテキストの形にくり抜きます。
color: transparent;
- テキスト自体の色を透明にすることで、背景のグラデーションのみが見えるようにします。

おしゃれなグラデーション例

Web Design Pallet

HTML

<p class="text-gradation">Web Design Pallet</p>

CSS

.text-gradation {
  display: inline-block;
  font-family: "Roboto", sans-serif;
  font-size: 52px;
  font-weight: bold;
  background: linear-gradient(to right, #00DBDE, #FC00FF);
  -webkit-background-clip: text;
  color: transparent;
}

Web Design Pallet

HTML

<p class="text-gradation">Web Design Pallet</p>

CSS

.text-gradation {
  display: inline-block;
  font-family: "Roboto", sans-serif;
  font-size: 52px;
  font-weight: bold;
  background: linear-gradient(105deg, #8ae4b3, #f1ea1a);
  -webkit-background-clip: text;
  color: transparent;
}

Web Design Pallet

HTML

<p class="text-gradation">Web Design Pallet</p>

CSS

.text-gradation {
  display: inline-block;
  font-family: "Roboto", sans-serif;
  font-size: 52px;
  font-weight: bold;
  background: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
  -webkit-background-clip: text;
  color: transparent;
}

Web Design Pallet

HTML

<p class="text-gradation">Web Design Pallet</p>

CSS

.text-gradation {
  display: inline-block;
  font-family: "Roboto", sans-serif;
  font-size: 52px;
  font-weight: bold;
  background: linear-gradient(45deg, #FA8BFF 0%, #2BD2FF 52%, #2BFF88 90%);
  -webkit-background-clip: text;
  color: transparent;
}

Web Design Pallet

HTML

<p class="text-gradation">Web Design Pallet</p>

CSS

.text-gradation {
  display: inline-block;
  font-family: "Roboto", sans-serif;
  font-size: 52px;
  font-weight: bold;
  background: linear-gradient(to right, #7ce5a6, #fbe352, #f7797d); 
  -webkit-background-clip: text;
  color: transparent;
}

Web Design Pallet

HTML

<p class="text-gradation">Web Design Pallet</p>

CSS

.text-gradation {
  display: inline-block;
  font-family: "Roboto", sans-serif;
  font-size: 52px;
  font-weight: bold;
  background: linear-gradient(45deg, #A9C9FF 0%, #FFBBEC 100%);
  -webkit-background-clip: text;
  color: transparent;
}

背景にグラデーション

misa

背景にグラデーションをかけて、白文字でくり抜くのもおしゃれです✨

Web Design Pallet

HTML

<p class="text-gradation">Web Design Pallet</p>

CSS

.text-gradation {
  display: inline-block;
  font-family: "Roboto", sans-serif;
  font-size: 52px;
  font-weight: bold;
  color: #fff;
  background: linear-gradient(to right, #fa709a, #fee140);
  padding: 0 8px;
  line-height: 1.4;
}

Web Design Pallet

HTML

<p class="text-gradation">Web Design Pallet</p>

CSS

.text-gradation {
  display: inline-block;
  font-family: "Roboto", sans-serif;
  font-size: 52px;
  font-weight: bold;
  color: #fff;
  background: linear-gradient(to right, #00DBDE, #FC00FF);
  padding: 0 8px;
  margin-left: 12px;
  line-height: 1.4;
  transform:skewX(10deg);
}