CSSパターンジェネレーター

Q: 背景を透明にできますか？

はい。**背景色**に`transparent`、またはアルファ付きのrgba()/oklch()の色を入力してください。

ドット、水玉、ストライプ、市松模様、グリッド、ジグザグ、十字グリッドのCSS背景パターンを、色・タイルサイズ・太さを指定して作成。画像ファイルは不要です。

パターン設定

パターン

パターンの色

背景色

タイルサイズpx

ドットの半径px

プレビュー

CSS コード

background-color: #ffffff;
background-image: radial-gradient(#6366f1 2px, transparent 2px);
background-size: 20px 20px;

CSSパターンジェネレーターとは？

CSSのグラデーションだけで繰り返し背景パターンを生成するため、画像ファイルは不要です。パターン、2色、タイルサイズ、線やドットの太さを選ぶと、背景用のCSS宣言をコピーできます。

CSSパターンジェネレーターの使い方

パターンを選びます：ドット、水玉、ストライプ、市松模様、グリッド、ジグザグ、十字グリッド。
パターンの色と背景色を設定します。
タイルサイズと太さ（ドットの半径、ストライプの幅、線の太さ）、ストライプの場合は角度を調整します。
プレビューを確認します。
CSS コードをコピーします。

例

入力

Checkerboard, tile 40px, pattern #000000 on #ffffff

出力

background-color: #ffffff;
background-image: repeating-conic-gradient(#000000 0% 25%, transparent 0% 50%);
background-size: 40px 40px;

CSSパターンジェネレーターを使うべき場面

さりげないページ背景、プレースホルダー、方眼紙風の効果、装飾セクションに適しています。解像度に依存せず拡大縮小でき、HTTPリクエストも発生しません。複雑なイラスト的パターンには、SVGタイルのほうが柔軟です。

CSSパターンジェネレーターの仕組み

各パターンはbackground-colorと、background-sizeで繰り返される1つ以上のグラデーションで構成されます。ドットはradial-gradient(color r, transparent r)を使い、水玉はbackground-positionでずらした2枚目のレイヤーを加えます。ストライプははっきりした色の切り替えを持つrepeating-linear-gradient、市松模様はrepeating-conic-gradient(color 0% 25%, transparent 0% 50%)を使い、グリッドは水平と垂直の線形グラデーションの組み合わせ、ジグザグは4つの45°三角形で作られます。太さはタイルサイズまでに制限されます。