[CSS]背景グラデーション/複数色で区切る/文字グラデーションの３パターン

フォトショなしで背景や見出しに綺麗なグラデーションや複数色を使いたいときの備忘録です。

このような変更をしたいとき

左から、背景グラデーション(gradient) / 複数色で区切る(colors) / 文字グラデーション(Thank you so much!!) の順番です。

変更前

変更後

各ソースコードと解説は以下です。

背景グラデーションの場合

ソースコード

<div class="content content__gradient">gradient</div>

.content{width: 300px;height:300px;text-align: center;}

.content__gradient{
    background-image: linear-gradient(green,blue,red);
}

解説

()内の色の順に上から下にグラデーションになります。
また、グラデーションの方向を変えたいときは色の前に xxdegを記述するかto 方向のキーワードを記述します。
※ 数値をいじると斜めにもなるので必要に応じてブラウザの検証で目で見て調整してください。

↑:下から上へ = 0deg (もしくは to top )
→:左から右へ = 90deg (もしくは to right )
↓:上から下へ = 180deg (もしくは to bottom )
←:右から左へ = 270deg (もしくは to left )

グラデーションの別バージョンサンプル(例題)

左から右へグラデーションをつまり緑から赤にかけてグラデーションを付けたい場合のサンプル。

.content{width: 300px;height:300px;text-align: center;}

.content__gradient{
    background-image: linear-gradient(90deg,green,blue,red);  /* 90degを追記すると方向が変わる */
}

緑→→青→→赤

細い仕様確認ページはこちら

複数色で区切る

ソースコード

<div class="content content__colors">colors</div>

.content{width: 300px;height:300px;text-align: center;}

.content__colors{
    background-image: linear-gradient(green 0% 25%,blue 25% 50%,red 50% 75%,orange 75% 100%);
}

解説

色の後に全体の100%にしたとき、開始位置の％と終了位置の％を記述する。
色の方向はグラデーションと同様、degやto方向キーワードで変更可能。

複数色で区切るの別バージョンサンプル(例題)

フランス国旗は、33%区切りで色分けし、90degかto rightで左から右の並びに変更すればOK。

.content{width: 300px;height:300px;text-align: center;}

.content__colors{
    background-image: linear-gradient(to right, #003cf2 0% 33%, #ffffff 33% 66%, ff020f 66% 100%);
}

細い仕様確認ページはこちら

文字グラデーションの場合

ソースコード

<div class="content content__typo">Thank you so much!!</div>

※ 文字は横並びなので初めからto rightを入れてます。↓

.content{width: 300px;height:300px;text-align: center;}

.content__typo{
    background-image: linear-gradient(to right,green 0% 25%,blue 25% 50%,red 50% 75%,orange 75% 100%);
    -webkit-background-clip: text;
    color: transparent;
    
    font-size: 25px;
    font-weight: 600;
}

解説

background-imageと一緒に-webkit-background-clip: text;とcolor: transparent;を記述します。

文字グラデーションの別バージョンサンプル(例題)

background-imageにlinear-gradient()ではなく、url()で画像を敷くこともできます。
※ 見やすいように文字はかなり大きく変更してます。

.content{width: 300px;height:300px;text-align: center;}

.content__typo{
    background-image: url(../img/nat-10.jpg);  /* 普通に画像を敷いてもOK */
    -webkit-background-clip: text;
    color: transparent;
    
    font-size: 300px;
    font-weight: bold;
}

細い仕様確認ページはこちら

本来のbackground-clipプロパティの用途は、要素の背景をborder、padding、contentのどれまで拡張するかを設定する役割です。今回は、そのプロパティ値をtextにすることで背景の適用範囲範囲をより狭い文字に収めたと言う感じです。