Softonic

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

ステップ 1 / 3

パターンを選ぶ

各項目は画像ファイルを使わず、繰り返し表示される CSS グラデーションパターンを生成します。

パターンの種類
次へ

ドット、グリッド、密なストライプ、市松模様、クロスハッチ、間隔の広い斜線から選び、背景色、パターン色、繰り返し間隔を設定します。CSS グラデーションによる繰り返し背景をライブプレビューで確認し、CSS ルールに貼り付けられるプロパティをコピーできます。パターンに応じて background-color、background-image、background-size、background-position を使用します。画像や SVG ファイルは生成しません。

パターンの生成方法

  1. 1

    パターンを選ぶ

    ドット、グリッド、密なストライプ、市松模様、クロスハッチ、間隔の広い斜線。

  2. 2

    2 色を設定する

    背景色と、グラデーションの線や形に使うパターン色を選びます。

  3. 3

    間隔を調整する

    繰り返し間隔を、密な 5 px から広めの 80 px まで設定します。

  4. 4

    ライブプレビューを確認する

    パターン、色、間隔を変えると、プレビューがすぐに更新されます。

  5. 5

    CSS をコピーする

    生成されたプロパティをコピーし、任意の CSS ルールに貼り付けます。

純粋な CSS、画像ファイルなし

すべてのパターンは、単色の background-color の上に CSS グラデーションで描かれます。別の背景画像をホストしたり読み込んだりする必要はありません。たとえばドットは次のようになります。

.hero {
  background-color: #1F2937;
  background-image: radial-gradient(#FFFFFF 1px, transparent 1px);
  background-size: 20px 20px;
  background-repeat: repeat;
}

CSS 背景は初期値で繰り返されます。生成されるサイズと位置は、繰り返したときに各レイヤーがそろうよう設定されています。ただし、ブラウザーのズームや小数のデバイスピクセルにより、境界の見え方がわずかに変わることがあります。間隔を変えると、密度を調整できます。

各モチーフは何でできているか

モチーフ 何から作られるか 向いている用途
ドット 繰り返しの radial-gradient テック系ページ、ダッシュボード、モダンな UI
グリッド 交差する 2 本の linear-gradient の線 方眼紙のような雰囲気、ホワイトボード、手帳
密なストライプ 45 度の repeating-linear-gradient バーバーポール風の差し色、遊び心のある区画
市松模様 角度をつけた 4 層の linear-gradient レトロな UI、透過表示風の背景
クロスハッチ 交差する 2 つの repeating-linear-gradient スケッチや印刷のテクスチャ、エディトリアル
間隔の広い斜線 45 度の単一の repeating-linear-gradient 警告状態、ストライプの日よけ、スポーツ

色とコントラストのヒント

  • 背景には低めのコントラストを使う。 背景色に近いパターン色は一般に控えめに見えます。強いコントラストはページの内容と競合することがあります。
  • ブランドに合わせる。 ただのグレーではなくブランドカラーをパターン色に使い、テクスチャをあなたのアイデンティティと結びつけましょう。
  • ダークモード。 暗い背景色と少し明るいパターン色を試してください。強いコントラストは、広い暗色面では騒がしく見える場合があります。
  • 文字を両方の色に対して確認する。 文字を重ねる場合は、字形の下に現れ得る背景色とパターン色の両方に対して文字色のコントラストを確認してください。このツールはパターンを表示しますが、WCAG のコントラスト監査は行いません。

どこで使うか

  • 画像なしで少しテクスチャがほしいヒーローや区画の背景。
  • ダッシュボードのカードやパネル。淡いグリッドやドットが構造感を加えます。
  • 市松模様がニュートラルに読み取られる空の状態やプレースホルダー。
  • 方眼紙やクロスハッチの雰囲気が欲しい印刷風のレイアウトやスライド。

別の背景アセットではなく CSS を使うため、画像リクエストは増えません。グラデーション、サイズ、位置は後からブラウザーの開発者ツールでも調整できます。

よくある質問

いいえ。出力は純粋な CSS です。background-color と、CSS グラデーションでできた background-image です。その CSS をコピーして要素に貼り付けます。ダウンロードやホストが必要な画像や SVG ファイルはありません。

CSS 背景は初期値で繰り返されます。生成されるサイズと位置は、選択したパターンの各レイヤーをそろえます。ブラウザーのズームや小数のデバイスピクセルで境界が少し違って見える場合があるため、実際に使うサイズで確認してください。

低コントラストのパターンは一般に気が散りにくいものの、それだけで文字の読みやすさは証明できません。文字色を、その下に現れ得るすべての色に対して確認してください。文章量が多い場合は、単色背景のほうが検証しやすいことがあります。

色は CSS の中の 16 進数の値にすぎません。background-color とグラデーション内部の色を編集するか、ここで新しい色で作り直して、新しいスニペットをコピーしてください。

関連ツール

ASCII表リファレンス

0から127までの完全なASCII表です。NUL、LF、DELなどの制御コードを含め、各文字の10進数、16進数、8進数、2進数、HTML数値文字参照を表示します。

HTML文字参照

HTMLエンティティの検索可能なリスト、その名称コードおよび数値コード、および特殊文字や記号のワンクリックコピー機能を提供します。

JavaScript圧縮ツール

変数名のリネーム、空白の削除、デッドコードの除去、定数畳み込みでJavaScriptを圧縮し、より小さなバンドルを作成します。

FPS カウンター

requestAnimationFrame でブラウザーの FPS を測定。平滑化、最小・最大フレームレート、警告しきい値、任意のグラフに対応。ローカルで動作し、アップロードも API も不要です。

キーボードショートカット一覧

macOS、Windows、Linux向けに、VS Code、Chrome、GNU Readlineを使うBashの公式資料に基づく既定ショートカットを検索できます。

プレースホルダー画像ジェネレーター

1〜4000 pxの画像に色と文字を設定し、PNGで保存できます。外部URLとHTMLもコピーできます。

このツールは他の言語でも利用できます