CSSだけで作る幾何学パターン — repeating-gradient活用ガイド
CSSのrepeating-linear-gradient・repeating-conic-gradient・radial-gradientを組み合わせると、画像なしで美しい幾何学パターンを実装できます。CSS Pattern Generatorはこれらのパターンをビジュアルに生成します。
repeating-linear-gradientでストライプを作る
`repeating-linear-gradient(45deg, #14b8a6, #14b8a6 2px, transparent 2px, transparent 20px)` のような記法で斜めストライプが作れます。最初の2値でライン色とライン幅を、後の2値でライン間隔を指定します。0degで横ストライプ、90degで縦ストライプになります。background-sizeは指定不要で自動的に繰り返されます。
グリッドパターンの作り方
グリッドは水平・垂直2方向のrepeating-linear-gradientを重ねます。`background-image: repeating-linear-gradient(0deg, rgba(255,255,255,0.1), rgba(255,255,255,0.1) 1px, transparent 1px, transparent 20px), repeating-linear-gradient(90deg, rgba(255,255,255,0.1), rgba(255,255,255,0.1) 1px, transparent 1px, transparent 20px)` のように2つのグラデーションをカンマで繋ぎます。
チェッカーボードパターン
`repeating-conic-gradient(#000 0% 25%, #fff 0% 50%)` にbackground-sizeを設定するだけでチェッカーボードが作れます。repeating-conic-gradientは回転方向にグラデーションが繰り返されるため、2色を25%ずつ交互に配置するとチェッカー状になります。
ドットパターン
`radial-gradient(circle, #14b8a6 2px, transparent 2px)` にbackground-sizeを指定するとドットパターンになります。background-sizeでドット間隔を、radial-gradientの2pxでドットサイズを制御します。半透明色を使うと奥行き感のあるパターンになります。