CSS 背景パターン生成

CSSは、グラデーションだけで繰り返しの背景パターンを描けます。色の停止位置をくっきり切ればグラデーションがストライプになり、background-size がタイル1つを要素全体に繰り返します。結果はどの拡大率でも鮮明で、ダウンロードは不要、値を1つ変えるだけで色も変えられます。このジェネレーターは、角度自由のストライプ、水玉、ドットの格子、チェッカー、格子線、方眼紙、クロスハッチ、ジグザグ、ひし形、直角二等辺三角形という、継ぎ目のない10種類のパターンを作り、CSSをブラウザーでプレビューし、SVG版も提供します。

使い方

1. パターンを選びます。
2. パターンの色と背景色を設定します。
3. タイルサイズと、ストライプの幅・線の太さ・ドットの大きさ（ストライプは角度も）を設定します。
4. CSSをコピーするか、デザインツール用にSVGパターンをダウンロードします。

計算式

stripes: repeating-linear-gradient(angle, color 0 w, transparent w s) · dots: radial-gradient(circle, color r, transparent r + 1px) with background-size s s · grid: linear-gradient(color t, transparent t) across and down

sはタイルサイズ、wはストライプの幅、rはドットの大きさの半分、tは線の太さです。同じ位置に色の停止位置を2つ置くと、ぼかしではなくくっきりした境界になります。ジグザグとひし形のパターンは、45°のグラデーションを4つ使い、それぞれがタイルの1つの角に三角形を塗ります。

計算例

初期値の、45°のストライプ、#eff6ff の上の #2563eb、24 pxごとに幅8 pxは、background-image: repeating-linear-gradient(45deg, #2563eb 0 8px, transparent 8px 24px); になります。40 pxのチェッカーは円錐グラデーション1つで、conic-gradient(#2563eb 90deg, transparent 90deg 180deg, #2563eb 180deg 270deg, transparent 270deg) に background-size: 40px 40px を組み合わせると20 pxの正方形になります。