【CSS】背景・テキスト・枠線にグラデーションをかける方法

RELEASE / 2023.11.29 UPDATE / 2023.11.30

css

HTML

グラデーション

背景やテキスト、枠線にグラデーションがかけられている場面に遭遇したことはありませんか？
これらにグラデーションがかけられている場合、CSSでは再現出来ないと思い、画像として処理していませんか？
実はCSSだけで背景やテキスト、枠線にグラデーションをかけることが出来るんです。
今回の記事では背景やテキスト、枠線にグラデーションをかける方法をご紹介します。

この記事の目次を表示

1 背景・テキスト・枠線にグラデーションをかける方法
- 1.1 背景にグラデーションをかける方法
2 テキストにグラデーションをかける方法
- 2.1 枠線にグラデーションをかける方法
3 まとめ

背景・テキスト・枠線にグラデーションをかける方法

CSSでグラデーションをかけるにはbackgroundプロパティのlinear-gradientを使用します。
まずはこのlinear-gradienの基本的な使用方法を見てみましょう。

backgroundプロパティのlinear-gradientは以下のようにグラデーションの向き、1つ目の色とその色の開始位置、2つ目の色とその色の終了位置を指定します。

background: linear-gradient(向き, 色 開始位置, 色 終了位置);

色は3色以上でも指定することが出来ます。

それでは本題となる背景、テキスト、枠線にグラデーションをかける方法を見ていきましょう。

背景にグラデーションをかける方法

まずは背景にグラデーションをかける方法をご紹介します。

HTMLの構造は以下の通りです。

<div>【CSS】背景・テキスト・枠線にグラデーションをかける方法</div>

CSSは以下のように指定します。

div {
    background: linear-gradient(90deg, rgba(220,90,69,1) 0%, rgba(232,199,46,1) 50%, rgba(61,133,130,1) 100%);
}

背景にグラデーションをかける場合、backgroundプロパティのlinear-gradientを使用します。
linear-gradientを使用して複数の色の組み合わせてグラデーションを作成します。

実装イメージは以下の通りです。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

テキストにグラデーションをかける方法

続いてテキストにグラデーションをかける方法をご紹介します。

HTMLの構造は以下の通りです。

<p>【CSS】背景・テキスト・枠線にグラデーションをかける方法</p>

CSSは以下のように指定します。

p {
    background: linear-gradient(90deg, rgba(220,90,69,1) 0%, rgba(232,199,46,1) 50%, rgba(61,133,130,1) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

実はテキストにグラデーションをかける場合も、使用するのはbackgroundプロパティのlinear-gradientになります。

まず、backgroundプロパティのlinear-gradientを使用してグラデーションの背景を作成します。
続いて、-webkit-background-clip: text;の指定でタグのテキストでくり抜きます。
-webkit-text-fill-color: transparent;の指定でくり抜いた部分に背景を表示します。
最後にdisplay: inline-block;を指定します。

実装イメージは以下の通りです。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

枠線にグラデーションをかける方法

最後に枠線にグラデーションをかける方法をご紹介します。
枠背にグラデーションをかける方法は複数のやり方があります。

疑似要素を使用する方法

まずは疑似要素を使用する方法をご紹介します。

HTMLの構造は以下の通りです。

<div><span>【CSS】背景・テキスト・枠線にグラデーションをかける方法</span></div>

疑似要素を利用する場合、枠線を指定するタグの内側をさらにタグで囲う必要があります。
上の例では<div>タグに枠線を付ける想定です。

CSSは以下のように指定します。

div {
    position: relative;  
    background: linear-gradient(90deg, rgba(220,90,69,1) 0%, rgba(232,199,46,1) 50%, rgba(61,133,130,1) 100%);
}
div::before{
    width: calc(100% - 2px);
    height: calc(100% - 2px);
    left: 1px;
    top: 1px;
    z-index: 1;
    position: absolute;
    background: #ccc;
    background: #fff;
    display: block;
    content: "";
}
div span{
    z-index: 2;
    position: relative;
}

<div>タグにbackgroundプロパティのlinear-gradientを使用してグラデーションの背景を作成します。
この上に疑似要素で作成した白背景を被せます。
この時、横幅・高さを背景よりそれぞれ2pxずつ小さくして1pxずつ内側に来るようにします。
こうすることで、枠線のグラデーションを表現することが出来ます。

実装イメージは以下の通りです。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

border-imageとborder-image-sliceを使用する方法

続いてborder-imageとborder-image-sliceを使用する方法をご紹介します。
HTMLの構造は以下の通りです。

<div>【CSS】背景・テキスト・枠線にグラデーションをかける方法</div>

border-imageとborder-image-sliceを使用する場合、疑似要素を使用する方法とは違い、内側をさらにタグで囲う必要はありません。

CSSは以下のように指定します。

div {
    border: 1px solid;
    border-image: linear-gradient(90deg, rgba(220,90,69,1) 0%, rgba(232,199,46,1) 50%, rgba(61,133,130,1) 100%);
    border-image-slice: 1;
}

枠線の太さはborderプロパティで指定します。
そしてグラデーションはborder-imageプロパティのlinear-gradientを使用してグラデーションの枠線を作成します。
最後にborder-image-sliceプロパティを1に設定します。

実装イメージは以下の通りです。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.