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

ほとんどの「パターン ジェネレーター」ツールは、すべてのオプションに対して同じ繰り返し線形勾配の式を静かに再利用し、数値を変更するだけです。これはそうではありません。ここにある 6 つのパターン タイプはそれぞれ、実際にその形状を生成する特定の CSS テクニックから構築されています。ストライプでは、2 つのカラー バンドを持つ単一の繰り返し線形グラデーションが使用されます。ドットは、長方形のグリッド上に円形のドットをきれいにタイル表示できない繰り返し放射状グラデーションではなく、純粋に背景サイズによってタイル化された 1 つの放射状グラデーション (古典的な CSS ドットのトリック) を使用します。チェッカーボードは実際の 4 象限の円錐グラデーション公式を使用します。正方形のタイルを中心とする円錐グラデーションは、90 度の境界で 4 つの象限の正方形に自然に分割され、それらの象限タイル全体で 2 色が交互に配置され、近似ではなく本物のチェッカーボードになります。

グリッドと斜めのクロスハッチはどちらも、境界線のトリックで 2 番目の方向を偽るのではなく、2 つの繰り返し線形グラデーションを別々の背景画像エントリとして重ねます。グリッドは、「右へ」と「下へ」の繰り返しグラデーションを組み合わせて、鮮明な水平および垂直の罫線を実現します。クロスハッチは、バスケットウィーブ スタイルの斜め織りに +45 度および -45 度の繰り返しグラデーションを重ねます。正確に言う価値があります。これは、本当のヘリンボーン ジオメトリではなく、正直なクロスハッチであり、ツールは過剰に主張するのではなく、そのようにラベルを付けます。三角形はチェッカーボードの 4 つのウェッジの円錐グラデーション手法を再利用しますが、45 度回転したグラデーションを開始します。これにより、ウェッジの境界がタイルのエッジの中点からコーナーに移動し、同じ 4 つのウェッジが 4 つの象限正方形ではなく、コーナーからコーナーへの 4 つの三角形に変わります。

すべてのパターン タイプでは、実際に適用されるコントロールのみが表示されます。角度スライダーはストライプに表示され、ドットの半径と間隔はドットに表示され、線の太さはグリッドとクロスハッチに表示されます。また、大きなタイル状のプレビュー ボックスは変更のたびに再描画されるため、値を確定する前にいくつかの完全な繰り返しを確認できます。出力モードを SVG に切り替えると、同じパターンがプレーンな四角形、円、パス、または多角形のプリミティブから構築された <pattern> 要素として再表示され、スタンドアロンの .svg ファイルをワンクリックでダウンロードするだけで、SVG ドキュメントの <defs> 内に貼り付けることができます。

すべてがブラウザ内でローカルに実行されます。画像のアップロード、サーバーの往復、アカウントは必要ありません。繰り返しのない単色またはグラデーションの塗りつぶしの場合は、このサイトの CSS グラデーション ジェネレーターが代わりに適切なツールです。これは特に、ゼロ画像アセットから構築されたタイル化可能な幾何学的な背景用です。