CSSパターンジェネレーター
純粋なCSSグラデーションだけでタイル張り可能な背景パターンを作成します。画像ファイルは不要で、 CSSをコピーできます。
仕組み
各プリセットは、1つまたは2つのCSSlinear-gradient()またはradial-gradient()
レイヤーを、ソフトな混ざり合いのないはっきりしたカラーストップで構築します。これがなめらかな
グラデーションを鮮明な繰り返し形状へと変えています。background-sizeはちょうど
1タイル分の寸法に設定されているため、端で目に見える継ぎ目なくパターンが繰り返されます。ドットや
グリッドのパターンでは、形状が角で切れずに中央に来るよう、さらにbackground-positionをオフセットして
います。
すべて生成されたCSSであり、プレビューボックス自身のbackgroundスタイルに適用されます。
アップロードは一切行われず、画像リクエストも発生しません。
よくある質問
画像ファイルを使っていますか?
いいえ。すべてのパターンは、繰り返しの背景として重ねられたCSSグラデーションから作られており、画像リクエストは一切ありません。ラスターのタイルではなくベクター計算なので、どのズームレベル、どの要素サイズでもパターンが鮮明なままです。
パターンは継ぎ目なくタイル状に並びますか?
はい。background-sizeがちょうど1つの繰り返し単位に設定されているため、どの要素サイズでも端から端まで目に見える継ぎ目なくパターンが繰り返されます。
これはどこかに送信されますか?
いいえ。パターンの生成とプレビューはすべてブラウザのCSSエンジン内で行われます。アップロードは一切行われません。