CSSで文字を横方向にグラデーションさせるときは「display:inline-block」をつけよう

HTML / CSS

2021.03.29

この記事は約3分で読めます。

どうも上かるびです。

CSSで文字を”横方向に”グラデーションさせようと思ったときに気を付けることがありますので、ご紹介します。

Contents

横方向のグラデーションはコピペでは上手くいかない
横方向でもきれいにグラデーションさせる方法
1. display:inline-block;をつける
2. グラデーションさせたい要素をspanで囲む
linear-gradientはemでも指定できる
コピペ用としてお使いください（CodePen）

横方向のグラデーションはコピペでは上手くいかない

「文字 CSS グラデーション」などでググって出てくる記事のほとんどで、下記のような実装方法が紹介されているかと思います。

h1{
  color: #333;//for IE
  background: linear-gradient(〇〇deg, #ff1100, #ff2200 50%, #ff3300);
  -webkit-background-clip: text;
  -webkit-text-fill-color: rgba(255,255,255,0.0);
}

h1{

color: #333;//for IE

background: linear-gradient(〇〇deg, #ff1100, #ff2200 50%, #ff3300);

-webkit-background-clip: text;

-webkit-text-fill-color: rgba(255,255,255,0.0);

}

ただですね！↓の画像のような横方向にグラデーションさせたい場合は↑をコピペしてカラーコードを変えただけでは上手くいきません。

実際にCSSグラデーションのサイトを使って実装してみた結果が↓こちらです。（h1のフォントサイズはデフォルトの32px）

見ての通り、グラデーションが上手く効いてません。

さあなぜでしょうか？（30秒お考えください。）

・

はい、正解です！h1はブロック要素のため、横幅いっぱいに広がってるからなんですね。

横方向でもきれいにグラデーションさせる方法

簡単な方法を２つご紹介します。

display:inline-block;をつける

幅を横いっぱいではなくも文字幅にすればその間でグラデーションが構成されます。

h1 {
  background: linear-gradient(to right, #3fbdb5, #7277f0, #ec5858);
  -webkit-background-clip: text;
  -webkit-text-fill-color: rgba(255, 255, 255, 0);
  color: #333; //for IE
  display: inline-block;
}

h1 {

background: linear-gradient(to right, #3fbdb5, #7277f0, #ec5858);

-webkit-background-clip: text;

-webkit-text-fill-color: rgba(255, 255, 255, 0);

color: #333; //for IE

display: inline-block;

}

グラデーションさせたい要素をspanで囲む

spanはインライン要素なので、こちらでも同様の結果が得られます。

h1 span {
  background: linear-gradient(to right, #3fbdb5, #7277f0, #ec5858);
  -webkit-background-clip: text;
  -webkit-text-fill-color: rgba(255, 255, 255, 0);
  color: #333; //for IE
}

h1 span {

background: linear-gradient(to right, #3fbdb5, #7277f0, #ec5858);

-webkit-background-clip: text;

-webkit-text-fill-color: rgba(255, 255, 255, 0);

color: #333; //for IE

}