CSSバックグラウンドパターンジェネレータ
純粋なCSSで、シームレスで繰り返されるバックグラウンドパターンを生成します。ドット、グリッド、縞、チェッカーボード、波、3Dキューブなどを、独自の色、スケール、透明度で作成できます。完成したCSSルールとHTMLスニペットをコピーしてください。画像ファイルは不要です。
入力
色
テキストの背後に微妙なテクスチャを作るには、10～20%に設定します。
形状
1つの繰り返されるタイルのサイズ（ピクセル単位）
線の厚さ、またはドットの半径。
出力
生成されたルールはこのクラスに限定されるため、独自のスタイルと衝突しません。
出力
パターンがここに表示されます。
実際に生成されたCSS。Shadow DOMで隔離されて描画されます。コピーするのと同じです。
インラインのmin-heightは、空のデモボックスにサイズを与えるためにあります。独自のレイアウトで削除してください。
このツールを使う他の方法
REST API
curl -X POST https://api.iotools.cloud/v1/tool/css-background-pattern-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"pattern": "dots",
"color": "#6366f1",
"bgColor": "#ffffff",
"opacity": "100",
"size": "32",
"weight": "3",
"className": "io-pattern"
}'ご自身のアカウントのキーに差し替えてください。ツールのフィールドがそのままリクエストボディになります——ラッパーはありません。
AIエージェントに依頼する
Use the IOTools `css-background-pattern-generator` tool (CSS Background Pattern Generator) on this input:
YOUR_INPUT_HEREIOTools MCPサーバーに接続された任意のエージェントにこれを貼り付け、入力内容を追加してください。
埋め込みウィジェット
<iframe
src="https://iotools.cloud/embed/css-background-pattern-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="CSSバックグラウンドパターンジェネレータ — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>ご自身のページに貼り付けるだけ——無料、キー不要、リンクを掲載するだけです。
| API/MCP 1回あたりの費用 | 5クレジットから |
|---|---|
| クレジットが足りませんか? | 料金を見る |
次の方法でも利用可能
ガイド
CSSグラデーションで作られた繰り返されるバックグラウンドパターンは、ファイルサイズが本当に軽いです。ホストするべき画像ファイルがなく、余分なHTTPリクエストもなく、Retinaディスプレイでページを開いても端がぼやけず、色は16進数の値を2つ編集するだけで変更できます。PNGを再度エクスポートする必要はありません。このジェネレータが、その作業をあなたの代わりにやってくれます。パターンを選んで、色、スケール、透明度を設定し、完成したルールをコピーしましょう。
すべてがあなたのブラウザで実行されます。入力内容はどこにも送信されません。
使い方
- パターンを選ぶ。 15種類の家族が利用可能です。水玉、ずれた水玉、グリッド、グラフペーパー、横縞／縦縞／斜め縞、格子、等角線、チェッカーボード、ダイヤモンド、三角形、ジグザグ、波、3Dキューブです。
- 色を設定する。 「パターンの色」で図形を描き、「背景色」でその背後を塗りつぶします。
- 形状を調整する。 パターンのサイズ は、繰り返されるタイル1つの幅（ピクセル単位）です。線の太さ は、線がどのくらい厚いか（またはドットがどのくらい大きいか）を決めます。幾何学的構造が完全に比例的なパターン（チェッカーボードなど）では、線の太さは隠されます。チェッカーボードには太くする線がないため、オプションが表示されない場合があります。
- 透明度を下げる。 これはほとんどの人が求めるパラメータですが、ほとんどのジェネレータにはありません。100%では、パターンはコンテンツと競合します。10～20%では、テクスチャとして読め、邪魔になりません。
- CSSをコピー して、スタイルシートに貼り付けてください。隣のHTMLスニペットは、ルールが期待するマークアップを示しています。
設定
- パターン — 幾何学的な家族。各パターンは、
linear-gradient、repeating-linear-gradient、またはradial-gradientから構築された純粋なbackground-imageです。 - パターンの色／背景色 — 16進数の値です。
background-colorはグラデーション層の下にあるため、パターンの色が上に見えます。 - パターンの透明度 — 100%未満では、パターンの色が
rgba()として出力されるため、背景が透き見えます。 - パターンのサイズ — 4pxから160px。小さい値は細かいテクスチャ、大きい値は大胆なグラフィックブロックを生成します。
- 線の太さ — タイルサイズの半分に制限されています。それより太い線はタイルを実色で満たしてしまいます。
- クラス名 — ルールはこのクラスに限定されるため、スタイルシートの他のものと衝突しません。
CSSに複数の background-image レイヤーがあるのはなぜですか？
これらのパターンのほとんどは、1つのグラデーションでは描画できません。グリッドは垂直線と水平線の家族です。チェッカーボードは、2つのずれた対角グラデーションです。等角キューブでは、各面に異なる陰影を与えるために6つのレイヤーが必要です。CSSは書かれた順序で描画し、最初のレイヤーが上にあり、background-size／background-position はこれらのレイヤーと1対1で一致します。複雑に見えますが、1つのプロパティです。ブロック全体をそのままペーストしても問題ありません。
縞パターンで background-size がないのはなぜですか？
縞、格子、等角の家族は repeating-linear-gradient を使用しており、これは勾配の停止点に独自の繰り返し周期を持っています。そこに background-size を追加しても何も変わりません。このツールはそれを出力しません。
これらのパターンは古いブラウザで動作しますか？
すべてのパターンはCSSグラデーションを使用しており、約2012年からすべての場所でサポートされています。縞の家族は複数位置の色止め（color 0 6px）を使用しており、2019年以降のブラウザが必要です。現在のすべてのバージョンのChrome、Firefox、Safari、Edgeはこれをサポートしています。
テキストの背後にパターンを入れたい場合は？
透明度を10～20%に設定し、小さなパターンサイズを選択してください。満全な力で、忙しいパターンは本文を読みにくくしてしまいます。同じパターンを15%にすれば、紙のテクスチャのように読め、邪魔になりません。
関連ツール
グラデーションが必要ですか？パターンではなく。CSSグラデーションジェネレータ は、線形および放射状グラデーションを視覚的に作成します。CSSの代わりに実際のSVGファイルとして出力される繰り返し図形の場合は、SVGパターンジェネレータ を使用してください。ソフトでぼやけたバックドロップの場合は、CSS Aurora Blob Generator を使用してください。