photoshop起動させてパターン作るのだるい！！
cssでドットとかストライプの背景パターン作れないの〜？
cssだで背景のパターンが作りたいだと？
人に聞く前に自分で調べたのか貴様！！
…まあよかろう
吾輩が仕事中に、いつもコピペで使いまわしてるサンプルコードを紹介してやろう！
刮目せよ！🍕
パターンだけ作りたいのに、わざわざphotoshopを開くのめんどくさい。。
そんな時はcssだけで作るに限ります笑
コピペで楽々追加しちゃいましょう〜
ブックマークさえしておけば、仕事中にすぐ使えるようwebデザインで頻出する順にまとめてみました。
きっと制作の助けになるはずです！
それではどうぞ！
ちなみにこちらがCSSでパターンを作る方法です
一応やり方も載せときますね。
cssのlinear-gradientやradial-gradientプロパティなどで実装できますが、ちょっとパターンが凝ったものになると一気に複雑怪奇なコードになるので、自分で書けるようになる必要はないと思います。
ひとまず基礎だけ抑えておけば、コードいじくるだけで色や大きさも楽に変えられると思いますので、ふーんこんな感じなんだー程度で。
background: #edfeff;
background-image: radial-gradient(#1981f7 20%, transparent 0), radial-gradient(#1981f7 20%, transparent 0);
background-position: 0 0, 10px 10px;
background-size: 20px 20px;このコードで下の画像のようになります。
サンプルコード一覧は下記からどうぞ。
【コピペOK】CSSで作る背景パターンのサンプル25選
ドット（水玉模様）
大粒
See the Pen rNWdNqV by botanin (@botanin) on CodePen.
小粒
See the Pen zYoWYLr by botanin (@botanin) on CodePen.
ストライプ
水平
See the Pen OJbvJBw by botanin (@botanin) on CodePen.
垂直
See the Pen NWbYWeo by botanin (@botanin) on CodePen.
斜線（太い）
See the Pen VwmXwgM by botanin (@botanin) on CodePen.
斜線（細い）
See the Pen mdOxdoL by botanin (@botanin) on CodePen.
グリッド
細い
See the Pen LYbdYKj by botanin (@botanin) on CodePen.
太い
See the Pen oNYqgvG by botanin (@botanin) on CodePen.
網目（斜め）
See the Pen zYoWxrN by botanin (@botanin) on CodePen.
グリッド（塗りつぶし）
See the Pen ExNEaow by botanin (@botanin) on CodePen.
ギンガムチェック
垂直
See the Pen WNozboe by botanin (@botanin) on CodePen.
斜め
See the Pen eYBMmvB by botanin (@botanin) on CodePen.
菱形
See the Pen rNWdazy by botanin (@botanin) on CodePen.
三角形
See the Pen qBqoExo by botanin (@botanin) on CodePen.
ユニーク（十字）
See the Pen poNLvLb by botanin (@botanin) on CodePen.
ユニーク（幾何学）
See the Pen YzpaPLR by botanin (@botanin) on CodePen.
ジグザグ
See the Pen ZEBxYRe by botanin (@botanin) on CodePen.
ジグザグ（3D）
See the Pen KKNowBM by botanin (@botanin) on CodePen.
ユニーク（月型）
See the Pen ZEBxYMK by botanin (@botanin) on CodePen.
ユニーク（波紋①）
See the Pen mdOxyGg by botanin (@botanin) on CodePen.
ユニーク（波紋②）
See the Pen xxRWbyW by botanin (@botanin) on CodePen.
グラデーション①
See the Pen abBYzXY by botanin (@botanin) on CodePen.
グラデーション②
See the Pen OJbvPGP by botanin (@botanin) on CodePen.
ユニーク（バスケットのかご）
See the Pen CSS Pattern: Basket Weave by Mark Deutsch (@doytch) on CodePen.
ユニーク（謎の模様）
See the Pen CSS Pattern Play – 4 by Praveen Puglia (@praveenpuglia) on CodePen.
まとめ
いかがでしたか？
今回はcssをコピペするだけですぐに作れる背景パターンをまとめていきました。
普段から使えるサンプルを始め、個性的なパターンも数多く紹介していきましたが、cssの底力には驚かされるばかりですね。
皆さまの参考になれば嬉しいです。
それではまた！
