CodeKitHubこのツールとは？
CSSは画像ファイルなしでも、グラデーション——radial-gradient()やlinear-gradient()——をbackground-imageとして使い、要素より小さいbackground-sizeと組み合わせることで、グラデーションがタイル状に繰り返される仕組みで反復パターンを描けます。水玉はrepeating radial-gradientを使い、ストライプと市松模様はrepeatingまたは重ねたlinear-gradient()を使い、グリッド線は2本の重なるlinear-gradient()の線を使います。
このツールはそれらのグラデーション宣言を代わりに組み立てます。パターンの種類を選び、パターンの色、背景色、間隔を調整すると、ライブプレビューが更新されます——そのまま正確なbackground-imageとbackground-sizeのCSSをコピーできます。
出典: CSS Images Module Level 3, W3C —これらのパターンの土台となるrepeating-linear-gradient()とrepeating-radial-gradient()を定義しています。
なぜこれを使うのか？
- 画像ファイルもHTTPリクエストも不要——パターンは純粋なCSSで、Retina/高DPI画面を含むどの解像度でも即座に描画されます。
- グラデーション構文を手書きしたりタイリングの計算をしたりせずに、色と間隔を自在に調整できます。
- ライブプレビューでコピーする前に正確な反復パターンを確認できます。
- ラスター画像ではなくベクター計算なのできれいに拡大縮小し、要素をリサイズしてもぼやけません。
- すべてブラウザ内で完結——設定した内容はどこにもアップロードされません。
- 無料、登録不要、モバイルでも動作します。
使い方
- パターンの種類を選びます：水玉、斜めストライプ、市松模様、グリッド線のいずれかです。
- パターンの色と、パターンの形の間・背後に表示される背景色を選びます。
- サイズスライダーを調整して、ドット、ストライプ、グリッドのマス目を大きく/小さくします——これはパターンがどれだけ密に繰り返されるかも制御します。
- 生成されたCSSをコピーし、任意の要素のbackground-image（表示されている場合はbackground-size/background-positionも）として貼り付けます。
例
入力
パターン: 水玉 · 色: 青 · 背景: 白 · サイズ: 24px出力
background-color: #ffffff;
background-image: radial-gradient(rgba(59, 130, 246, 1) 3px, transparent 3px);
background-size: 24px 24px;
background-position: 0 0;セクションの控えめな背景やカードのテクスチャとしてよく使われる、定番の薄い水玉模様です。
各パターンの構造
- 水玉：radial-gradient()が塗りつぶした小さな円を1つ描き、background-sizeによってドットが並ぶタイルとして繰り返されます。
- 斜めストライプ：45度のrepeating-linear-gradient()が、一定間隔でパターン色と背景色を交互に切り替えます。
- 市松模様：45度のlinear-gradient()を2枚重ね、互いに半タイル分ずらすことで、明暗が交互になるマス目を作ります。
- グリッド線：2本の細いlinear-gradient()の線——水平と垂直——を指定した間隔でタイル状に並べ、方眼紙のようなグリッドを作ります。
画像ファイルの代わりにCSSパターンを使うべき場面
CSSグラデーションのパターンにはファイルサイズもHTTPリクエストもないため、瞬時に読み込まれ、ラスターのPNG背景タイルと違って高DPI画面でぼやけることもありません。テキストの背後の控えめなテクスチャ、セクションの区切り、空の状態のイラスト、プレースホルダーカードなどに最適です。複雑なイラストや写真調のパターンには実際の画像の方が適していますが、CSSグラデーションはここで扱うようなシンプルで幾何学的な反復図形に最も向いています。
他のCSSエフェクトとの組み合わせ
パターンはグラスモーフィズムのカードの背景としても相性が良く、ぼかしが効果を発揮するには背後に視覚的なテクスチャが必要だからです。コンテナ要素の角丸とも自然に組み合わせられます。
よくある質問
これらのパターンに画像ファイルは必要ですか？
いいえ。ここにあるすべてのパターンは、background-imageとしてCSSグラデーションのみで生成されています——PNGやSVGなどのファイルは一切関与しないため、追加のHTTPリクエストもなく、高解像度画面でぼやける心配もありません。
パターンの大きさは変えられますか？
はい——サイズスライダーはbackground-sizeを制御し、パターンが繰り返される1タイルの大きさを設定します。サイズを小さくするとドットやストライプ、グリッドのマス目が密に詰まり、大きくすると間隔が広がります。
市松模様のパターンが2つのグラデーションを使うのはなぜですか？
1つのlinear-gradient()だけでは、1方向にしか色を交互に切り替えられません。45度のグラデーションを2枚重ね、互いに半タイル分ずらすことで、市松模様特有の明暗が交互になるマス目が生まれます——これはCSSのみで市松模様を作る標準的なテクニックです。
このパターンはRetina/高DPI画面でもくっきり表示されますか？
はい。パターンはビットマップ画像ではなく数学的なグラデーションとして描画されるため、拡大縮小やぼやけなしに画面が必要とする解像度でそのまま描かれます——高いピクセル密度で引き伸ばされたり繰り返されたりする小さなラスター画像タイルとは異なります。
このパターンをページ全体の背景として使えますか？
はい——生成されたbackground-image、background-size、background-position（表示されている場合）をbody要素や任意の全幅コンテナ要素に適用してください。コントラストには注意してください。派手でコントラストの強いパターンを本文テキストの背後に置くと可読性を損なうことがあるため、広い背景領域には控えめで淡い設定の方がうまくいくことが多いです。