使い方
- パターンの種類（ストライプ、ドット、チェック、ジグザグ）を選びます。
- メインカラー、アクセントカラー、ピクセル単位のサイズを設定します。
- プレビューを確認し、コピーボタンでCSSをコピーします。
このジェネレーターはCSSグラデーションだけで繰り返しパターンを作るため、配置する画像ファイルはありません。メインカラーが下地の背景で、アクセントカラーはその上に描かれるストライプ、ドット、四角に使われます。サイズは10から100までのピクセル値で、1回の繰り返しの大きさを決めます。
ストライプは45度の斜線を作り、各線の太さはサイズ値の半分です。ドットは格子状に小さな円を描きます。チェックは2色の市松模様を作ります。ジグザグは繰り返す三角波を作ります。いずれのタイプも、背景色、グラデーションでできた背景画像、必要に応じて背景サイズと位置を設定する数行のCSSを返します。
パターンを使うには、コピーした宣言をコンテナやbodyなど、任意の要素のルールに貼り付けます。その後、ご自身のスタイルシートで色やサイズを変更できます。パターンはグラデーションで作られているため、きれいに拡大縮小でき、ネットワークリクエストも増えません。
すべてブラウザ内で生成され、何もアップロードされません。
よくある質問
どのパターンが使えますか？
ストライプ、ドット、チェック、ジグザグです。
画像ファイルは必要ですか？
いいえ。パターンはCSSグラデーションを使うため、配置や読み込みが必要な画像はありません。
サイズの設定は何を変えますか？
パターン1回分の繰り返しの大きさ（ピクセル）です。値が大きいほどパターンも大きくなります。
このCSSはどの要素にも使えますか？
はい。背景を付けたい要素のルールに、宣言を貼り付けてください。
入力内容はアップロードされますか？
いいえ。CSSはブラウザ内で作られます。