CSSで表現する背景パターン51種＋【コピペで簡単！/アニメーション有】

サイトを制作する際にちょっとしたワンポイントとして、ボックスやボタンの背景にパターンを使いたい場面があるかと思います。
そんな時、わざわざフォトショやイラレで画像を作るのは結構面倒ですよね。

そこで今回は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.

コチラもオススメ

2019年12月24日CSSのみ！コピペで簡単に使えるアニメーション付きカルーセルスライダー8選 2018年10月26日CSSだけで実装できる！ぬるぬる動くオシャレなドロップダウンメニュー 2019年4月11日コピペで簡単！ページ送りのデザインCSS 35選まとめ【ページャー・ページネーション】