8192.jp

CSSのみでボーダーに綺麗なグラデーションを掛ける方法+α

Web制作 2022/07/20 2022/07/20

近未来的なデザインのWebサイト等で使えそうな、グラデーションの掛かったボーダーの作り方を紹介します。(調べてないけど多分)ほぼ全てのブラウザで動作するので、かなり実用的です。

目次

    ボーダー部分にlinear-gradientを適用させる

    本来border-colorにはlinear-gradientを指定できませんが、background-imageを上手く使えばボーダーに対して擬似的にグラデーションを掛けることが可能になります。

    とりあえずサンプルを見てみましょう。

    まずは完成品

    See the Pen Grad_border_0 by Leo_8192 (@Leo_8192) on CodePen.

    こんな感じです。左上から右下に掛けて、綺麗な赤→青のグラデーションが掛かっています。

    HTML・CSS

    <div class="container">
    	<div class="item">😇</div>
    </div>
    .item {
    	box-sizing: border-box;
    	border: 4px solid transparent; /* ボーダーの太さ */
    	background-image:
    		linear-gradient(#000,#000), /* ボーダーの内側(パディングボックス)の色 */
    		linear-gradient(135deg, #f00, #00f); /* ボーダーの色 */
    	background-origin: border-box;
    	background-clip: padding-box,border-box;
    	/* 幅や高さは省略 */
    }
    

    HTMLは至ってシンプル。装飾用のdiv等は使わずに、.itemという要素に対して直でグラデーションボーダーを適用しています。

    CSSはちょっと長めですが、一つ一つ見ていきましょう。

    CSSの解説

    border: 4px solid transparent;
    ボーダー周りの設定。太さは自由ですが、ボーダーの裏にあるグラデーションを見せるために色は必ず透明(transparent)にしておきましょう。
    background-image:
    		linear-gradient(#000,#000),
    		linear-gradient(135deg, #f00, #00f);
    background-imageを使うことで背景をレイヤー化させます。linear-gradient(#000,#000)というのがかなーり気持ち悪いですが、background-imageで単色を指定するにはこうするしかないんで諦めましょう…
    background-origin: border-box;
    背景を配置する基準となる位置を、ボーダー領域まで広げています。これを書いておかないとグラデーションの開始位置がボーダーの内側(パディングボックスの左上)になってしまうため、綺麗なグラデーションになりません。
    background-clip: padding-box,border-box;
    背景の表示領域を指定しています。この例だと単色の#000はpadding-boxなのでボーダーの内側(パディングボックス)のみが塗りつぶされますが、グラデーション部分はborder-boxなのでボーダー領域まで塗りつぶされます。

    ざっくり言うと「ボーダーボックスまで広がったグラデーションレイヤーの上に、パディングボックスまでしか広がっていない単色のレイヤーを重ねている」ってことです。

    ボックスモデルの違いについてはMDNで詳しく解説されているので、気になる人は見てみましょう。

    応用編

    それではさっきのテクニックを使って遊んでみます。

    分かりやすくするためにボーダーの太さと色は極端な指定をしているので、実用するならそこらへんの調整はお忘れなく。

    レインボーのボーダー(その1)

    See the Pen Grad_border_1 by Leo_8192 (@Leo_8192) on CodePen.

    background-image:
    	linear-gradient(#000,#001),
    	linear-gradient(135deg, red, orange, yellow, green, aqua, blue, purple);

    赤から紫まで変化させるパターン。

    レインボーのボーダー(その2)

    See the Pen Grad_border_2 by Leo_8192 (@Leo_8192) on CodePen.

    background-image:
    	linear-gradient(#000,#001),
    	repeating-linear-gradient(135deg, red, orange, yellow, green, aqua, blue, purple, red 50%);

    repeating-linear-gradientでレインボーを「red→red」までを繰り返させるパターン。

    radial-gradientを使う

    See the Pen Grad_border_3 by Leo_8192 (@Leo_8192) on CodePen.

    background-image:
    	linear-gradient(#002,#005),
    	radial-gradient(circle at top center, #fff,#000);

    background-imageに使えるものなら何でもいけるので、radial-gradientでももちろんOKです。使い道は無さそうですが…

    repeating-conic-gradientを使う(その1)

    See the Pen Grad_border_4 by Leo_8192 (@Leo_8192) on CodePen.

    background-image:
    	linear-gradient(#555,#555),
    	repeating-conic-gradient(#fff 0%, #fff 25%, #000 25%, #000 50%);

    conic-gradientなら中心点を基準にぐるっと回るようなグラデーションが作れるので、こんな不思議なボーダーも簡単に作れます。

    repeating-conic-gradientを使う(その2)

    See the Pen Grad_border_5 by Leo_8192 (@Leo_8192) on CodePen.

    background-image:
    	linear-gradient(#555,#555),
    	repeating-conic-gradient(#fff 0%, #fff 25%, #000 25%, #000 50%);
    background-size: auto, 16px 16px;

    background-sizeと組み合わせれば市松模様も作れます。使わんけど。


    以上、CSSのみでボーダーにグラデーションを掛ける方法でした。装飾用のdiv要素なども使わずにすぐ実装できるので、Webサイトのアクセント等に取り入れてみてはいかがでしょうか?

    ただ、使いすぎて「しつこい」「くどい」「色が散らかっている」…みたいなデザインにならないようにお気を付けて。