近未来的なデザインの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;

background-image:
		linear-gradient(#000,#000),
		linear-gradient(135deg, #f00, #00f);

background-origin: border-box;

background-clip: padding-box,border-box;

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

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

応用編

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

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

レインボーのボーダー（その１）

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);

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

レインボーのボーダー（その２）

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を使う（その１）

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を使う（その２）

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サイトのアクセント等に取り入れてみてはいかがでしょうか？

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

この記事が気に入ったらフォロー・シェアしてね！

Twitter Feedly