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

純粋なグラデーションからCSS背景パターンを生成します。パターンを選択し、カスタマイズして、コピーします。

20px
100%

CSSコード

CSS背景パターン

CSS 背景パターンはタイル化された画像です、ストライプ、ドット、グリッド、チェッカーボード、三角形、すべて CSS グラデーション関数で完全に描かれ画像ファイルなし。3 つのプロパティがすべての作業を行います:background-image は要素に任意のグラデーション画像をペイント、background-size はその画像の 1 つのタイルのサイズを定義、background-repeat(デフォルトは repeat)はその画像を両軸でタイル化します。background-position はそれから縫い目をシフトして各レイヤーのタイルが他のものと整列するようにします。したがってパターンは互いの上にスタックされた複数のグラデーション画像にすぎません、各々が同じタイルにサイズ設定され、各々がインターロックするように位置決めされます。ブラウザはカンマ区切りの background-image 値を前から後ろにペイントするので、リストの最初の画像は 2 番目の上に、2 番目は 3 番目の上にあります、など。

ジャンル全体は構文トリックのおかげで存在します:ハードカラーストップ。同じ位置の隣接するカラーストップはフェードではなく即座のトランジションを生成します。linear-gradient(red 50%, blue 50%) は赤から青へのフェードではありません、シャープな線です。ハードストップなしでは滑らかなグラデーションを得ます、それらと共に幾何学を得ます。ストライプ、ドット、チェッカーボード、三角形、シェブロン、このツールが出力するすべてのパターンは、異なる角度とタイルサイズで適用された、その単一プロパティから構築されます。

簡単な歴史、Lea Verou とパターンギャラリー

純粋 CSS 背景パターンのジャンル全体に責任のある単一のリソースがあるとすれば、それは Lea Verou の CSS3 Patterns Gallery で、元々 lea.verou.me/css3patterns/ でホストされていました。Verou は2010年と2011年初頭を通じて個別のデモを公開しました、2011年2月の有名なチェッカーボードデモを含む、ギャラリー自体を発表する前に2011年4月15日に「CSS3 patterns gallery and a new pattern」という記事で(新しいパターンは彼女がこれまで作った中で最も難しいと特徴づけた日本のキューブデザインでした)。数か月後、2011年12月1日、彼女は 24 ways アドベントカレンダー用に標準的なエッセイ「CSS3 Patterns, Explained」を書きました、すべてのストライプ、ドット、チェッカーボードを支えるハードカラーストップ技術の最高のプレーンイングリッシュ説明として依然としてあります。2015年6月、O'Reilly は彼女の本 CSS Secrets: Better Solutions to Everyday Web Design Problems を出版し、パターン章を完全な分類に拡張しました。ギャラリーのより広い文化的影響は Verou のプロジェクトノートに記録されています:それは「CSS グラデーションでハードストップを使用して背景パターンや他のグラフィックを簡単に作成する広範な慣行を始め」、後に Opera Software のエンジニアが彼らのグラデーション実装を改良するために使用されました。

ベンダープレフィックスから仕様まで

CSS グラデーションは CSS Image Values and Replaced Content Module Level 3(一般的に「CSS Images 3」)で定義されており、W3C CSS Working Group によってメンテナンスされ、Tab Atkins Jr. と Elika J. Etemad などが編集者です。最初の公開ワーキングドラフトは2011年7月12日、仕様は2012年4月に Candidate Recommendation に到達し、現代のプレフィックスなし構文をロックしました、0deg が上を指し to right が 90deg に等しい慣習を含む。ブラウザ出荷順:WebKit が遠く最初、-webkit-gradient() は Safari 4(2009)で使用可能、Firefox は -moz-linear-gradient() を Firefox 3.6(2010年1月21日)で出荷、Internet Explorer 10 は2012年にプレフィックスなし形式を出荷、プレフィックスなし構文は2013年後半までにすべての主要エンジンで安定しました。conic-gradient() は CSS Images Level 4 で仕様化されました、Level 3 が構文が設計されているときすでに Last Call にあったから、Chrome 69(2018年9月4日)、Safari 12.1(2019年3月25日)、Firefox 83(2020年11月17日)で出荷されました。2026年では、サポートに値するあらゆるブラウザのプレフィックスやフォールバックなしで background: linear-gradient(...) と background: conic-gradient(...) を自信を持って書くことができます。

linear-gradient、角度と辺

正式な文法は linear-gradient([<angle> | to <side-or-corner>], <color-stop>, ...) です。角度慣習はしばしば開発者を躓かせます、SVG/canvas 慣習と異なるからです。0deg は to top に等しい(グラデーションラインは上を指すので、最後の色がボックスの上部に現れる)。90deg は to right に等しい。180deg は to bottom に等しい(方向が与えられない場合のデフォルト)。270deg は to left に等しい。角度は上から時計回りに増加し、数学的慣習(0 が右で角度が反時計回りに増加)と SVG の <linearGradient> の反対です。有用な微妙さ:to right と 90deg は正方形のボックスでのみ等しい。非正方形のボックスでは、to top right は左下角からの対角線に正確に垂直なグラデーションラインを生成します、グラデーションがコーナーをきれいに到達することを意味します、45deg は常に文字通り 45 度です、アスペクト比に関係なく。これはタイルパターン(タイルは通常正方形)には重要ではありませんが、ヒーロー背景には重要です。

radial-gradient、形、サイズ、ドット

文法は radial-gradient([<shape> || <size>] [at <position>]?, <color-stop>, ...) です。2 つの形値は circle と ellipse です(ellipse がデフォルト)。サイズは 4 つの範囲キーワード closest-side、closest-corner、farthest-side、farthest-corner(デフォルト)のいずれか、または明示的な長さ/パーセンテージです。ドットパターンには、標準的なレシピは radial-gradient(circle at center, #000 0 5px, transparent 5px) に background-size: 20px 20px です、各 20 px タイルの中央の 5 px 黒い円、残りは透明。ドットは六角形ドットグリッドを生成するために半タイルでの 2 番目のレイヤーでオフセットできます。純粋なストライプには手動でタイルをサイズ設定する必要はありません:repeating-linear-gradient(45deg, #000 0 10px, #fff 10px 20px) は 10 px 幅の対角線黒白ストライプを生成し、ボックス全体で繰り返し、background-size 宣言を必要としません。繰り返しグラデーションには radial と conic のカウンターパートもあります、repeating-radial-gradient は同心円リングを作り、repeating-conic-gradient は風車を作ります。

conic-gradient、以前は構築できなかったパイチャートと太陽

conic-gradient() はラインに沿ってまたは中心からではなく中心の周りにカラーストップを回転させます。カラーストップは長さではなく角度で位置決めされます。知的歴史は最も興味深い CSS 物語の 1 つです:Lea Verou は2011年早くも、ブラウザがそれをサポートする前に conical-gradient() 提案を起草し、Tab Atkins Jr. は CSS Image Values Level 4 に関数を正式に追加したときに彼女のドラフトをクレジットしました。実装は何年もかかりました。2015年6月、Verou は SVG と彼女の -prefix-free ライブラリを使用してポリフィルを書き、CSSConf でステージで発表し、投稿のタイトルを「Conical gradients, today!」としました。ネイティブ到来は Chrome 69(2018年9月4日)、Safari 12.1(2019年3月25日)、Firefox 83(2020年11月17日)で起こりました。conic グラデーションが linear と radial が解除できないものを解除すること:canvas、SVG、JS なしのパイチャートとドーナツチャート(conic-gradient(red 0 25%, blue 25% 60%, green 60% 100%) に border-radius: 50% は完全なパイチャート)、カラーホイール(conic-gradient(red, yellow, lime, aqua, blue, magenta, red) は標準的な色相ホイールを生成)、小さな角度間隔のハードストップでの交互の色からのレイと星パターン、グラデーションフレームと角度コーナー反射、単一宣言でのチェッカーボード(repeating-conic-gradient(#000 0 25%, #fff 0 50%) に background-size は 2 つのスタックされた線形グラデーションではなく 1 つのグラデーションレイヤーでチェッカーボードを生成)。

パフォーマンス、CSS パターンが画像を打ち負かすとき、そしてそうでないとき

純粋 CSS パターンのパフォーマンス議論は最もよく理解する価値のあるものです、マーケティングコピーで過度に簡略化されているからです。純粋 CSS の利益:HTTP リクエストなし、デコードなし、PNG/JPEG/WebP オーバーヘッドなし、4 行 CSS ルールがバイナリファイルを置き換える、解像度独立ベクトル、パターンは 1×、2×、3× デバイスピクセル比で同一に見える、@2x と @3x アセットを出荷する必要なし、これがデザインシステムが retina 画面で PNG よりグラデーションパターンを好む最大の理由、簡単に再色付け可能、CSS 変数を変更すると全体のパターンが更新される、background-position 経由、または @property でアニメート可能なカラーストップ経由でアニメート可能。知っておくべきコスト:ペイントコストはタッチされたピクセルとグラデーションの複雑さでスケール、グラデーションは大きなボックスシャドウ、複雑な SVG、重いテキストエフェクトと並んで最もコストの高いペイント操作の 1 つで、フルウィンドウヒーローに多くのグラデーションレイヤーをスタックすると、ローエンド GPU でフレームのコストがかかる可能性。グラデーションカラーのアニメートは各フレームで完全な再ペイントをトリガー(これは Chromium と Firefox の @property を介して登録されたカスタムプロパティで変わるが、代わりに background-position をアニメートする方が安全)。実用的なヒューリスティック:単一の静的フルウィンドウパターンを持っていてアニメートしないなら、何も気付かないでしょう。長いリストの各カードに 5 つのグラデーションレイヤーをスタックしているなら、プロファイルしてください。

アクセシビリティ、コントラスト、装飾、reduced motion

CSS 背景パターンは、定義により装飾的です。それらはドキュメントツリーにもアクセシビリティツリーにも現れません、支援技術の観点から、それらは単に存在しません。それは大きく機能です、装飾的画像に関する W3C の WAI チュートリアルは、装飾的画像は「<img> ではなく CSS 背景画像を使用して提供されるべき」と明示的に言います、スクリーンリーダーによって自然に無視されるように。しかしコントラストはあなたがパターンの上に置く何にも依然として適用されます。WCAG 2.1 成功基準 1.4.3 は通常テキストに対して 4.5:1、大きなテキストに対して 3:1 のコントラスト比を要求します。パターンはこれをより難しくします、背景のローカル輝度がピクセルごとに変動するからです。WCAG 技術 G18 はこれを直接扱います:背景がパターン化されている場合、文字の周りの背景は文字が背後の背景と 4.5:1 のコントラスト比を維持するように選択またはシェードできます、たとえそれらが背景全体とその比率を持っていなくても。実用的に:パターンの上にテキストを置く場合は、互いに似た輝度を持つパターン色を選択するか(タイル全体でテキストとのコントラストが一貫するように)、テキストとパターンの間に固体カラーカードを置いてください。WCAG 2.1 はまた非テキスト UI コンポーネントとグラフィックに対して 3:1 のコントラストを要求します、これはパターンベースのアイコンとセパレータに適用される可能性があります。パターンがアニメート(スクロールするストライプ、ゆっくり回転する conic、輝くスケルトン)されている場合は、アニメーションを @media (prefers-reduced-motion: no-preference) でラップしてください。動機はスタイル的ではなく医学的です:アニメーションは前庭症状(吐き気、めまい)、光感受性てんかんを持つユーザーの発作、片頭痛を引き起こす可能性があります。

SVG パターン vs CSS グラデーション、公平な比較

SVG の <pattern> 要素は CSS グラデーションの精神的な兄弟です。両方とも単位セルを塗りつぶし領域にタイル化することを許します。それらは異なる強みを持ちます。SVG パターンが勝つとき:単位がグラデーションが自然に表現できない複雑な形(葉、魚のうろこ、不規則な六角形)であるとき、デザイナーが作成したアセットを出荷したいとき(Steve Schoger の Hero Patterns、2016年9月27日 CC BY 4.0 でローンチ、SVG パターンの標準的なライブラリ)、グラデーションのハードストップが近似するしかない鋭い曲線のために正確なベクトル幾何学が必要なとき、または fill="url(#myPattern)" を介して複数の SVG 要素にわたってパターンを再利用したいとき。CSS グラデーションが勝つとき:パターンが幾何学的(ストライプ、ドット、グリッド、チェッカーボード、シェブロン、三角形、直線と円から構成できるあらゆるもの)であるとき、HTTP オーバーヘッドゼロを望むとき、CSS 変数を介したインスタンスごとのカスタマイズが必要なとき(--stripe-color: red はパターンを即座に更新)、SVG 内だけでなくあらゆる HTML 要素に CSS 背景としてパターンを適用したいとき、または <animate> 要素なしでパターンをアニメートしたいとき。一般的なハイブリッド技術は SVG を background-image の data:image/svg+xml,... URL としてインライン化することです、これは純粋 CSS の「追加 HTTP リクエストなし」勝利を与え、デザイナーが任意の形を表現できるようにします。欠点はエンコーディングの複雑さです:# は %23 になり、二重引用符はエスケープされなければならず、DevTools で SVG を検査するのは扱いにくい。このジェネレータは純粋 CSS グラデーションパターンを出力します、トレードオフは意図的、最大の形の柔軟性ではなくシンプルさと小さなペイロード。

CSS パターンが価値を発揮する場所

ジャンルは壁紙より広いです。本番での実際の使用は次のとおりです:

使い方

  1. パターンタイプを選択: ストライプ、ドット、チェッカーボード、グリッド、ジグザグ、三角形など、すべて純粋なCSSで選択します。
  2. 色とスケールをカスタマイズ: スライダーで前景色と背景色、パターンサイズ、角度、間隔を調整します。
  3. ライブでプレビュー: 設定を変更すると、パターンがリアルタイムで表示されます。
  4. CSSをコピー: 生成されたbackgroundプロパティをコピーして、スタイルシートに貼り付けます。

よくある質問

CSS は古いブラウザで動作しますか?

あらゆる主要な現代ブラウザは linear-gradient、radial-gradient、繰り返しバリアントをプレフィックスなし、デフォルトで有効に出荷します、クリーンアップは2013年後半までに完了しました。conic-gradient はより長くかかりました(Chrome 69 が2018年9月、Safari 12.1 が2019年3月、Firefox 83 が2020年11月)が2026年も普遍的です。ジェネレータはサポートに値するあらゆるブラウザに必要ないのでベンダープレフィックスを出力しません。Microsoft Edge は2020年1月に EdgeHTML エンジンを廃止し、IE11 は2022年6月15日に寿命に達しました、両方とも今や新しいツールの歴史的脚注です。

CSS パターンはタイル化された画像背景より速いですか?

静的パターンには、はい、CSS パターンは HTTP リクエスト、デコードパス、retina 画面に必要なマルチ解像度アセット出荷を排除します。パターンは任意のズームでベクトル完璧で、CSS 変数を介して簡単に再色付け可能です。トレードオフはペイントコストです:グラデーションはブラウザがペイントできる最もコストの高いものの 1 つで、フルウィンドウヒーローに多くのグラデーションレイヤーをスタックすると、ローエンド GPU でフレームのコストがかかる可能性。カードまたはセクションの単一の静的パターンには、何も気付かないでしょう。長いリストの各アイテムに 5 つのグラデーションレイヤーをスタックしているなら、出荷前にプロファイルしてください。

パターンの上にテキストをアクセシブルに置くには?

WCAG 2.1 SC 1.4.3 は通常テキストに対して背景に 4.5:1、大きなテキストに 3:1 のコントラストを要求します。パターン化された背景では、ローカル輝度がピクセルごとに変動し、最悪の場合に平均コントラストが正しく見えてもコントラストが失敗する可能性があります。2 つの安全な戦略:互いに似た輝度を持つパターン色を選択する(タイル全体でテキストとのコントラストが一貫するように)、または、テキストとパターンの間に固体カラーカードを置く。高コントラストパターン(例えば白黒ストライプ)に直接テキストを置くことは、コントラストチェッカーと人間の読者の両方が苦労するケースです。

パターンをアニメートできますか?

はい。最も安価なアニメーションは @keyframes で background-position をシフトすることです、これはほとんどのブラウザでコンポジターのみの更新をトリガーし、60 fps でスムーズに実行できます。グラデーションカラー自体のアニメートは、各フレームが完全な再ペイントをトリガーするのでよりコストがかかります、現代の Chromium と Firefox は @property 登録カスタムプロパティでこれを軽減できますが、background-position がより安全なデフォルトです。常に @media (prefers-reduced-motion: no-preference) でアニメーションをラップしてください、アニメート背景は敏感なユーザーに前庭症状、発作、片頭痛を引き起こす可能性があります。

なぜ私のパターンは retina 画面でぼやけて見えるのか?

そうあるべきではありません、それがビットマップ画像ではなくグラデーションを使用する全体のポイントです。あなたのが、ぼやけているなら、カラーストップが鋭いパーセンテージにあるかチェックしてください(ハードストップは同じ位置の 2 つのストップ、50% 50.1% のようなわずかなギャップでも目に見えるぼやけバンドを導入)、タイルサイズがテキストスケーリングと予期せず相互作用する可能性のある em や % ではなく px であるかチェックしてください。古い Safari バージョンの Conic グラデーションは中央をわずかにぼやけたエリアとしてレンダリングしました、現代の Safari と Chrome は両方とも GPU でラスタライズし、問題は大部分が消えました。

私のデータはどこかに送信されますか?

いいえ。パターン選択、色選択、サイジング、CSS 生成はすべてブラウザで実行されます。コントロールを使用するときに発信リクエストはありません、DevTools の Network タブで確認できます。生成された CSS はあなたのもので、好きな場所に貼り付けてください。

関連ツール

CSSグラデーションジェネレーター

CSSグラデーションを視覚的に作成します。

Glassmorphismジェネレーター

フロステッドガラス効果を作成します。

Box-shadowジェネレーター

ビジュアルbox-shadowエディター。