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.