サイトを制作する際にちょっとしたワンポイントとして、ボックスやボタンの背景にパターンを使いたい場面があるかと思います。
そんな時、わざわざフォトショやイラレで画像を作るのは結構面倒ですよね。
そこで今回はCSSをコピペするだけで使える51種類以上の背景パターンをご紹介します。
種類豊富で色々なシーンで使いどころがあるかと思いますので、気に入った背景があればぜひお気に入りに登録しておきましょう！
ギンガムチェック風CSS背景パターン
See the Pen
texture by Miriam (@karaWhiteDragon)
on CodePen.
28種類のグラデーションストライプCSS背景パターン
See the Pen
Cards with simple stripe backgrounds by Ana Tudor (@thebabydino)
on CodePen.
ハーフトーンCSS背景パターン
See the Pen
Pure CSS halftone pattern (1 element) by Ana Tudor (@thebabydino)
on CodePen.
ギンガムチェックCSS背景パターン2
See the Pen
Flanel Lines by Travis (@tvalerius)
on CodePen.
カラフルなCSS背景パターン
See the Pen
jOEjmXK by Bennett Feely (@bennettfeely)
on CodePen.
幾何学模様CSSパターン背景
See the Pen
CSS single div geometric pattern by Lynn Fisher (@lynnandtonic)
on CodePen.
21種類のグラデ+模様CSS背景パターン
See the Pen
1 element card background patterns (see description) by Ana Tudor (@thebabydino)
on CodePen.
矢印風CSS背景パターン
See the Pen
CodePen Challenge – September 2019 [week 4] by CodeMeNatalie (@CodeMeNatalie)
on CodePen.
アルファベットのAが動くアニメーションCSS背景パターン
See the Pen
Background Pattern by eZ UI Design (@eZ_UI)
on CodePen.
ギンガムチェックCSS背景パターン3
See the Pen
Blue Squares by Michael van den Berg (@MichaelVanDenBerg)
on CodePen.
カワイイ3種のドットCSS背景パターン
See the Pen
Dots Challenge by Carlita Centeno (@carlita712)
on CodePen.
10種のグラデ+模様パターン
See the Pen
1 element card patterns (Chrome only) by Ana Tudor (@thebabydino)
on CodePen.
オシャレなCSS背景パターン
See the Pen
Grid, Flex, and background patterns by Liam (@liamj)
on CodePen.
パイナップルCSS背景パターン
See the Pen
CSS Fruit Background – Pineapple by Angela Velasquez (@AngelaVelasquez)
on CodePen.
動くカラフルな線形CSS背景パターン
See the Pen
(SVG+CSS) Squiggly Pattern by Chris Johnson (@jhnsnc)
on CodePen.
ドット＆グリッド風CSS背景パターン
See the Pen
CSS dot pattern/grid background by Edmundo Santos (@edmundojr)
on CodePen.
シンプルな格子風CSS背景パターン
See the Pen
CSS3 gradient pattern by foxeisen (@foxeisen)
on CodePen.
水中をイメージしたCSS背景パターン
See the Pen
underwater css pattern by Laura Sage (@ThePixelPixie)
on CodePen.
細かい格子風CSS背景パターン
See the Pen
CSS Lattice pattern by ampersand_xyz (@ampersand_xyz)
on CodePen.
4種のオシャレなCSS背景パターン
See the Pen
CSS Backgrounds by joshuar (@joshuar)
on CodePen.
2種のボックスCSS背景パターン
See the Pen
CSS Background Patterns – Boxes by Praveen Puglia (@praveenpuglia)
on CodePen.
シャツ風CSS背景パターン
See the Pen
6 stop shirt pattern by Ana Tudor (@thebabydino)
on CodePen.
カゴ(バスケット)織り風CSS背景パターン
See the Pen
CSS Pattern: Basket Weave by Mark Deutsch (@doytch)
on CodePen.
シンプルなギザギザCSS背景パターン
See the Pen
Simple pattern by Gabriel R (@byrass)
on CodePen.
モダンレンガ風CSS背景パターン
See the Pen
CSS Pattern Play – 4 by Praveen Puglia (@praveenpuglia)
on CodePen.
スケイル(鎧の装甲)風CSS背景パターン
See the Pen
Silver scale by yoksel (@yoksel)
on CodePen.
組み合わせサークルCSS背景パターン
See the Pen
Circles by yoksel (@yoksel)
on CodePen.
波状CSS背景パターン
See the Pen
Waves by yoksel (@yoksel)
on CodePen.
ドロップ(水滴)風CSS背景パターン
See the Pen
Drops by yoksel (@yoksel)
on CodePen.
2色のハートCSS背景パターン
See the Pen
Hearts by yoksel (@yoksel)
on CodePen.
サークル＆ドット模様CSS背景パターン
See the Pen
Circles and dottes by yoksel (@yoksel)
on CodePen.
幾何学模様CSS背景パターン2
See the Pen
Corners by yoksel (@yoksel)
on CodePen.
幾何学模様CSS背景パターン3
See the Pen
Squares by yoksel (@yoksel)
on CodePen.
コーナーCSS背景パターン
See the Pen
Corners by yoksel (@yoksel)
on CodePen.
アーガイル柄CSS背景パターン
See the Pen
Argyle Pattern by carpe numidium (@carpenumidium)
on CodePen.
3Dのボックスを組み合わせたCSS背景パターン
See the Pen
Jason Quote Bg Pattern by George Olaru (@babbardel)
on CodePen.
幾何学模様CSS背景パターン4
See the Pen
Handkerchief pattern by Katy DeCorah (@katydecorah)
on CodePen.
六角形のアニメーションCSS背景パターン
See the Pen
Neon Hexagons Pattern by Amelia Bellamy-Royds (@AmeliaBR)
on CodePen.
スクエアCSS背景パターン
See the Pen
CSS Pattern by Ee Venn Soh (@vennsoh)
on CodePen.
3Dキューブ風CSS背景パターン
See the Pen
Pattern CSS3 by Gino Farías (@ginirsss)
on CodePen.
チェック柄CSS背景パターン
See the Pen
CSS pattern with CSS blend mode by marinda (@mariiinda)
on CodePen.
縞模様CSS背景パターン
See the Pen
Striped Background by yoksel (@yoksel)
on CodePen.
渦巻(唐草模様風)CSS背景パターン
See the Pen
Frosty Spirals by yoksel (@yoksel)
on CodePen.
オシャレな模様CSS背景パターン
See the Pen
Css Pattern by yoksel (@yoksel)
on CodePen.
テーブルクロス風CSS背景パターン
See the Pen
Tablecloth by yoksel (@yoksel)
on CodePen.
ダイヤモンドCSS背景パターン
See the Pen
Diamonds by yoksel (@yoksel)
on CodePen.
斜めストライプCSS背景パターン
See the Pen
Diagonal stripes by yoksel (@yoksel)
on CodePen.
シンプルなグラデーションスクエアCSS背景パターン
See the Pen
Simple pattern with CSS3 by Jorge Epuñan (@juanbrujo)
on CodePen.
ギンガムチェック風CSS背景パターン4
See the Pen
Multiple Gradients for Fancy Patterns by Mark Lee (@leemark)
on CodePen.
方眼風CSS背景パターン
See the Pen
Blueprint pattern (CSS3) by Dean (@tennowman)
on CodePen.
幾何学模様CSS背景パターン5
See the Pen
Crappy Recreation of the Book Cover of *The Flame Alphabet* by Chris Coyier (@chriscoyier)
on CodePen.
