CSS背景パターン工房

ストライプ・水玉・チェックなどの背景模様を、画像を使わず CSS のグラデーションだけで作ります。色・大きさ・角度・太さを変えて、できたCSSをそのままコピーできます。

パターン
色
調整

プレビュー
CSS

      
大きさ・太さの単位は px、角度は deg（0deg＝下から上、90deg＝左から右に向かう向き）です。生成したCSSは linear-gradient・repeating-linear-gradient・radial-gradient・conic-gradient を使っており、現在の主要ブラウザで表示できます（conic-gradient は古いブラウザでは表示されないことがあります）。文字を重ねるときは、模様の上に地色の帯を敷くと読みやすくなります。

    

  





CSS背景パターン工房でできること
ストライプ・斜線・水玉・市松・方眼・ジグザグなどの背景模様を、画像を使わずCSSのグラデーションだけで作ります。Webサイトやバナーの背景に使うCSSを、プレビューを見ながら調整してコピーできます。
使い方
  1. 「パターン」からストライプ・斜線・水玉・千鳥水玉・市松・ギンガム・方眼・斜め格子・ジグザグのどれかを選びます。
  2. 「色」で模様の色と地の色を選びます。「色を入れ替え」で2色を逆にできます。
  3. 「調整」の大きさ・太さ・角度をスライダーか数字で変えます。パターンによって使わない項目は薄く表示されます。
  4. プレビューで見た目を確認し、「CSSをコピー」を押して自分のCSSに貼り付けます。
計算の仕組みと注意点
よくある質問
CSSだけでストライプの背景を作るには？
repeating-linear-gradient で色の切り替わる位置を指定します。例えば「#2b5d9c 0 12px, #f3efe4 12px 24px」と書くと12pxずつの縞になります。「ストライプ」を選ぶと、大きさ・太さ・角度に合わせたコードが表示されます。
水玉模様をCSSで作れますか？
radial-gradient で円を1つ描き、background-size で繰り返す間隔を決めると水玉になります。「水玉」では太さが円の半径になり、「千鳥水玉」は2層をずらして互い違いに並べます。
斜めのストライプの角度はどう決まりますか？
CSSのグラデーションの角度は、0degが下から上、90degが左から右への向きです。「斜線」や「ストライプ」を選んで角度を変えると、プレビューで向きを確かめられます。
背景に文字を重ねると読みにくくなりませんか？
模様のコントラストが強いと読みにくくなります。地の色に近い模様の色を選ぶか、文字の後ろに地色の帯を敷くと読みやすくなります。プレビュー中央の文字の帯で見え方を確認できます。