CSSグラデーションで作った背景パターンのサンプル

  • Posted on
  • Category : Tips
CSSグラデーションで作った背景パターンのサンプル

CSSのグラデーションはよく見る単純なグラデーションを作るだけでなく、記述の仕方によって様々な見栄えをつくることができます。画像で切り出してしまった方が圧倒的に早く実装できるような場合も正直ありますし、古いIEをサポートするために使えなかったりもしましたが、最近では旧ブラウザをサポート対象外にすることも多くなってきましたし、今後ますますレスポンシブやRetinaディスプレイなどを考慮して使う機会が増えるように思うので、利用する機会が多いと思う背景パターンをCSSのグラデーションを使って幾つか作ってみました。

※以下で紹介しているサンプルソースは全てプレフィックスを省いた状態となっていますので、必要であれば各自で追記してください。

ここでの表示は全て画像を使用しており、実際の表示は以下デモページにまとめているのでこちらをご覧ください。

垂直ストライプ

垂直ストライプ

垂直のストライプをCSSで実装する方法で、CSSは下記のように記述します。
配色を変えたい場合はカラーコード部分を、太さをや間隔を変更したい場合はサンプルソースで10px20pxとなっている箇所を変更します。

CSS

pattern {
	background: repeating-linear-gradient(90deg, #444, #444 10px, #888 0, #888 20px);
}

水平ストライプ

水平ストライプ

こちらは水平のストライプで、先ほどのものから回転させる記述を省けば実装できます。
CSSは下記のように記述し、同じくカラーや太さなど変更したい場合はカラーコード部分やpxの値を変更します。

CSS

pattern {
	background: repeating-linear-gradient(#444, #444 10px, #888 0, #888 20px);
}

斜めストライプ #1

斜めストライプ #1

こちらはストライプを斜めにしたもので、CSSは下記のように記述します。
ここでは回転を45degにしていますが、30degとか60degにすることで傾き具合を簡単に変更できます。

CSS

pattern {
	background: repeating-linear-gradient(45deg, #444, #444 10px, #888 0, #888 20px);
}

斜めストライプ #2

斜めストライプ #2

同じくストライプを斜めにしたもので、下記のように回転の記述箇所に「-(マイナス)」指定することで方向を逆にすることができます。

CSS

pattern {
	background: repeating-linear-gradient(-45deg, #444, #444 10px, #888 0, #888 20px);
}

ドット

ドット

CSSを下記のように記述することでドットパターンを表現することもできます。
background-positionbackground-sizeの値を変更することで、大きさや間隔などを変更することができます。

CSS

pattern {
	background: #888;
	background-image: radial-gradient(#444 20%, transparent 0), radial-gradient(#444 20%, transparent 0);
	background-position: 0 0, 10px 10px;
	background-size: 20px 20px;
}

チェック #1

チェック #1

四角が並んだチェック柄のようなものを表現したもので、同じくbackground-positionbackground-sizeの値を変更することで大きさなど変更できます。

CSS

pattern {
	background-color: #888;
	background-image: linear-gradient(45deg, #444 25%, transparent 25%, transparent 75%, #444 75%, #444), linear-gradient(45deg, #444 25%, transparent 25%, transparent 75%, #444 75%, #444);
	background-position: 0 0, 25px 25px;
	background-size: 50px 50px;
}

斜めチェック #1

斜めチェック #1

こちらはひし形(ダイヤ)を並べた感じのパターンで、CSSは下記のように記述します。

CSS

pattern {
	background-color: #888;
	background-image: linear-gradient(45deg, #444 25%, transparent 25%, transparent 75%, #444 75%, #444), linear-gradient(-45deg, #444 25%, transparent 25%, transparent 75%, #444 75%, #444);
	background-size: 25px 25px;
}

チェック #2

チェック #2

少し透過させたものを重ねることで上とか少し違うチェック柄を表現したものです。
CSSは下記のように記述します。

CSS

pattern {
	background-color: #fff;
	background-image: linear-gradient(90deg, rgba(0,0,0,.5) 50%, transparent 50%), linear-gradient(rgba(0,0,0,.5) 50%, transparent 50%);
	background-size: 50px 50px;
}

斜めチェック #2

斜めチェック #2

こちらは先ほどのものを斜めにしたもので、CSSは下記のように記述します。

CSS

pattern {
	background-color: #fff;
	background-image: linear-gradient(-45deg, rgba(0,0,0,.5) 25%, transparent 25%, transparent 50%, rgba(0,0,0,.5) 50%, rgba(0,0,0,.5) 75%, transparent 75%, transparent 100%), linear-gradient(45deg, rgba(0,0,0,.5) 25%, transparent 25%, transparent 50%,  rgba(0,0,0,.5) 50%, rgba(0,0,0,.5) 75%, transparent 75%, transparent 100%);
	background-size: 52px 52px;
}

以下はこれまで紹介してきたものに比べると利用する機会は少ないと思いますが、CSSだけでこんな背景パターンもできるよということでユニークな感じのものを幾つかご紹介します。

ユニーク #1

ユニーク #1

マークのようなものを作成・繰り返した背景パターンです。

CSS

pattern {
	background-color: #888;
	background-image: radial-gradient(closest-side, transparent 98%, #444 100%), radial-gradient(closest-side, transparent 98%, #444 100%);
	background-position: 0 0, 15px 15px;
	background-size: 30px 30px;
}

ユニーク #2

ユニーク #2

立体的なボックスが並んでいるような背景パターンで、CSSは下記のように記述します。

CSS

pattern {
	background-color: #555;
	background-image: linear-gradient(30deg, #444 12%, transparent 12.5%, transparent 87%, #444 87.5%, #444), linear-gradient(150deg, #444 12%, transparent 12.5%, transparent 87%, #444 87.5%, #444), linear-gradient(30deg, #444 12%, transparent 12.5%, transparent 87%, #444 87.5%, #444), linear-gradient(150deg, #444 12%, transparent 12.5%, transparent 87%, #444 87.5%, #444), linear-gradient(60deg, #888 25%, transparent 25.5%, transparent 75%, #888 75%, #888), linear-gradient(60deg, #888 25%, transparent 25.5%, transparent 75%, #888 75%, #888);
	background-position: 0 0, 0 0, 25px 50px, 25px 50px, 0 0, 25px 50px;
	background-size: 50px 100px;
}

ユニーク #3

ユニーク #3

こちらは三角を敷き詰めたような背景パターンで、CSSは下記のように記述します。

CSS

pattern {
	background-color: #444;
	background-image: linear-gradient(115deg, transparent 75%, #888 75%), linear-gradient(245deg, transparent 75%, #888 75%), linear-gradient(115deg, transparent 75%, #888 75%), linear-gradient(245deg, transparent 75%, #888 75%);
	background-position: 0 0, 0 0, 10px -20px, 10px -20px;
	background-size: 20px 40px;
}

Back to Top

CSSグラデーションで作った背景パターンのサンプル

CSSグラデーションで作った背景パターンのサンプル

/ Tips

Tagged with:

NxWorld

Sorry... doesn't support your browser

To get the best possible experience using our site we recommend that you upgrade to a modern web browser.NxWorldではご利用中のブラウザサポートはしていません。
Internet Explorerのアップグレード行う、もしくはその他のブラウザを使用しての閲覧をお願いします。