CSS 背景パターン生成ツール
ストライプ、ドット、グリッド、市松模様で軽量な背景を作り、すぐに確認して CSS をコピーします。
背景上の文字が読みやすいコントラストを選んでください。
斜めのストライプに使用します。他のパターンでは適用される場合のみ生成 CSS に含まれます。
プレビュー
プレビューは現行ブラウザーが対応する CSS グラデーションを使います。古いブラウザーや印刷では見た目が異なる場合があります。色だけのパターンを情報伝達の唯一の手段にしないでください。
使い方
使い方
- 種類を選び、前景色と背景色を設定します。
- タイル、線またはドットのサイズ、必要なら角度を調整してプレビューします。
- CSS をコピーし、スタイルシートの要素に適用します。
ローカルで作る 4 種の CSS パターン
ストライプは repeating-linear-gradient、ドットは radial-gradient、グリッドは 2 つの linear gradient、市松模様は conic-gradient を使います。画像のダウンロード、サーバー通信、サードパーティーパッケージなしでページ内に作成します。
プレビューとブラウザー差
タイルサイズはドット、グリッド、市松模様の反復範囲を決めます。詳細サイズは線幅、ドット半径、グリッド線幅を決め、角度はストライプに適用されます。現行ブラウザーは対応しますが、アンチエイリアスと印刷結果は異なる場合があります。装飾用途にし、重要情報を色だけで伝えないでください。
よくある質問
あわせて知りたいこと
画像ファイルを作成しますか？
いいえ。ブラウザーで背景を描画する CSS 宣言を作ります。自分のスタイルシートなどにコピーしてください。
別のブラウザーで少し違うのはなぜですか？
特に小さいタイルや斜めの境界では、グラデーションのアンチエイリアスが異なることがあります。色、サイズ、指示自体は同じです。
プレビューだけでアクセシブルですか？
テキストラベルはありますが、純粋なパターンは装飾として扱ってください。必要な情報はテキストや色以外の手掛かりでも伝えます。