デザイン / CSS
CSSパターンジェネレーター（ストライプ、ドット、グリッド、チェッカーボード）
CSSグラデーションだけで、ストライプ、斜めストライプ、グリッド線、ポルカドット、チェッカーボード、ジグザグの繰り返し背景パターンを作成できます。2色、サイズ、線幅を自由に指定して、CSSをコピーできます。
CSSパターンジェネレーター（ストライプ、ドット、グリッド、チェッカーボード）: 各パターンは、選択したサイズで繰り返す1つまたは2つのCSSグラデーションで構成されます。ストライプにはrepeating-linear-gradient、グリッドには交差する2つのlinear-gradient、ドットにはradial-gradient、チェッカーボードにはrepeating-conic-gradientを使用します。画像ファイルを使わないため、どのズーム倍率でもパターンが鮮明なままで、読み込みのコストもかかりません。 サーバーへのファイルアップロードは一切なく、100%ブラウザ内でローカル実行します。
- カテゴリ
- 開発者ツール
- 実行回数
- ブラウザ内で
- コスト
- 無料 · 登録不要
- 提供状況
- すぐに使えます
完全にブラウザ内で実行します
CSS
.pattern {
background-color: #f2faed;
background-image: repeating-linear-gradient(45deg, #63c42d 0 6px, transparent 6px 24px);
}各パターンはCSSグラデーションだけで描画されるため、ダウンロードする画像はありません。どの倍率でも鮮明なままで、スタイルシートで色を変更できます。テキストの背後に配置するパターンは控えめにしてください。2色のコントラストを低くすると、テキストが読みやすくなります。
チェッカーボードの描画方法
repeating-conic-gradient(#000 0 25%, transparent 0 50%)は、各タイルの中心を基準にした回転の第1四半期と第3四半期を塗りつぶします。これにより1つのタイルに2つの対角線状の正方形ができ、background-sizeによってタイルのサイズは正方形の2倍に設定されます。
パターンの組み合わせ
背景画像は重ねて表示されます。CSSグラデーションジェネレーターのグラデーションをパターンの後ろに置き、コンマで区切って指定すると、パターンがグラデーションの上に表示されます。
使い方
- パターンを選びます。
- 2色、繰り返しサイズ、線幅またはドットサイズを選びます。
- CSSをコピーします。
プライバシーと制限事項
すべての処理はブラウザ内で行われます。
関連ツール
よくある質問
パターンはすべてのブラウザで動作しますか？
はい。チェッカーボードに使用するconic gradientを含め、現在のすべてのブラウザがこれらのグラデーションに対応しています。
テキストの背後にパターンを配置するにはどうすればよいですか？
近い色の2色を選ぶと、パターンが控えめになり、テキストに十分なコントラストを保てます。
ストライプの角度を変更できますか？
はい。コピーしたCSSのrepeating-linear-gradientで角度を編集できます。たとえば45degの代わりに60degを指定します。
無料ツール · ブラウザ内で · アカウント不要