10+ CSS Background Pattern Examples

This post contains a total of 10+ CSS Background Pattern Examples with Source Code. All these Background Patterns are made using CSS.

You can use the source code of these examples with credits to the original owner.

Related Posts

CSS Background Pattern Examples

1. By Brent Miller

Made by Brent Miller. Animated CSS Grid Background Pattern. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
.pattern {
  z-index: 1;
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: linear-gradient(45deg, #1b2040, #071029);
  overflow: hidden;
}
@media (max-width: 1200px) {
  .pattern {
    height: calc(100vh - var(--site-header-height));
  }
}
.pattern:before {
  content: "";
  z-index: 2;
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: full;
  height: full;
  opacity: 0.45;
  background: radial-gradient(rgba(255, 255, 255, 0), theme("colors.black.500"));
}
.pattern-container {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-template-rows: repeat(6, 1fr);
  width: 1640px;
  height: 1080px;
  transform: rotate(45deg) scale(1.75) translate3d(19%, -31%, 0);
}
@media (max-width: 1440px) {
  .pattern-container {
    width: 1140px;
    hight: 948px;
  }
}
@media (max-width: 1200px) {
  .pattern-container {
    width: 1000px;
    height: 500px;
    transform: rotate(45deg) scale(2.75) translate3d(14%, 17%, 0);
  }
}
@media (max-width: 768px) {
  .pattern-container {
    width: 500px;
    height: 400px;
    transform: rotate(135deg) scale(2.75) translate3d(12%, 1%, 0);
  }
}
.pattern-container span {
  -webkit-animation: breathe 25s infinite;
          animation: breathe 25s infinite;
}
.pattern-container span:nth-child(1) {
  position: relative;
  grid-column: span 3;
  grid-row: span 3;
  background: #68ddff;
}
.pattern-container span:nth-child(1):after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(100% - 95px);
  background: linear-gradient(to right, transparent, #9ae5ff);
}
.pattern-container span:nth-child(2) {
  grid-column: span 2;
  grid-row: span 3;
  background: linear-gradient(45deg, #2c3155, #0c142f);
  -webkit-animation: breathe2 25s infinite;
          animation: breathe2 25s infinite;
}
.pattern-container span:nth-child(3) {
  position: relative;
  grid-column: span 1;
  grid-row: span 3;
  background-color: #11173c;
}
.pattern-container span:nth-child(3):after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(100% - 95px);
  background: linear-gradient(to top, #b5c224, #6ec092, #1cbfd7);
}
@media (max-width: 768px) {
  .pattern-container span:nth-child(3):after {
    height: calc(100% - 35px);
  }
}
.pattern-container span:nth-child(4) {
  grid-column: span 4;
  grid-row: span 7;
  background-color: #151a3a;
}
.pattern-container span:nth-child(5) {
  grid-column: span 3;
  grid-row: span 2;
  background: linear-gradient(to right, #b5c224, #6ec092, #1cbfd7);
}
.pattern-container span:nth-child(6) {
  grid-column: span 2;
  grid-row: span 2;
  background: linear-gradient(45deg, #2c3155, #0c142f);
  -webkit-animation: breathe2 25s infinite;
          animation: breathe2 25s infinite;
}
.pattern-container span:nth-child(7) {
  grid-column: span 1;
  grid-row: span 2;
  background: linear-gradient(225deg, #b5c224, #6ec092, #1cbfd7);
}

@-webkit-keyframes breathe {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(20%);
  }
}

@keyframes breathe {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(20%);
  }
}
@-webkit-keyframes breathe2 {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(40%);
  }
}
@keyframes breathe2 {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(40%);
  }
}
</style>
</head>
<body>
  <div class="pattern">
	<div class="pattern-container">
		<span></span>
		<span></span>
		<span></span>
		<span></span>
		<span></span>
		<span></span>
		<span></span>
	</div>
</div>
</body>
</html>

2. By Brett Peters

Made by Brett Peters. CSS Heart Polka-dot Background Pattern. Source

CSS Background Pattern by Brett Peters
<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.hearts-bg {
  height: 100%;
  background: #fafafa;
  background-image: radial-gradient(#d77 8.1333333333px, transparent 9.1333333333px), radial-gradient(#d77 8.1333333333px, transparent 9.1333333333px), radial-gradient(#c33 16.2666666667px, transparent 17.2666666667px), radial-gradient(#c33 16.2666666667px, transparent 17.2666666667px), linear-gradient(135deg, #d77 6%, #fafafa 6.45%, #fafafa 44%, transparent 46%, transparent 63%, #fafafa 63.25%), linear-gradient(45deg, transparent 39.75%, #c33 40.5%, #c33 60%, transparent 0, transparent 93.25%, #d77 94%);
  background-size: 122px 122px;
  background-position: 54.4933333333px 56.9333333333px, 68.32px 56.9333333333px, -8.1333333333px -8.1333333333px, 16.2666666667px -8.1333333333px, 0 0, 0 0;
}

body {
  margin: 0;
  height: 100vh;
  background-color: #fafafa;
}
</style>
</head>
<body>
  <div class="hearts-bg"></div>
</body>
</html>

3. By Rebecca Eilering

Made by Rebecca Eilering. CSS Doodle Background. Source

CSS Background Pattern by Rebecca Eilering
<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
.example {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.sample-content {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80%;
  background: rgba(255,255,255,0.85);
  transform: translate3d(-50%, -50%, 0);
  padding: 30px;
  
}

@media (min-width:600px) {
  .sample-content {
    width: 30%;
  }
}

.sample-content h1 {
  margin: 0;
  text-align: center;
}
</style>
</head>
<body>
  <section class="example">
  <div class="container">
    <css-doodle>
      :doodle {
        @grid: 10 / 100vmax;
        background: midnightblue;
      }
      @shape: cross;
      background: hsla(
        calc(300 - @index() * 5),
        60%, 70%, @rand(.8)
      );
      transform:
        scale(@rand(.2, 1.2))
        translate(
          @rand(-50%, 50%), @rand(-20%, 20%)
        );
    </css-doodle>    
  </div>
  <div class="sample-content">
    <h1>CSS-Doodle Background</h1>
  </div>
</section> 
  <script src='https://cdnjs.cloudflare.com/ajax/libs/css-doodle/0.2.3/css-doodle.min.js'></script>
</body>
</html>

4. By Yusuke Nakaya

Made by Yusuke Nakaya. Animated Caterpillar Background Pattern. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
:root {
  --caterpillar-color: #FABEAB;
}

body {
  background: #F4E7CA;
  height: 100vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

div {
  box-sizing: border-box;
}

.caterpillar {
  position: absolute;
  -webkit-animation: move 4s ease-in-out infinite;
          animation: move 4s ease-in-out infinite;
  filter: drop-shadow(120px 0 0 var(--caterpillar-color)) drop-shadow(240px 0 0 var(--caterpillar-color)) drop-shadow(480px 0 0 var(--caterpillar-color)) drop-shadow(960px 0 0 var(--caterpillar-color)) drop-shadow(-1920px 0 0 var(--caterpillar-color)) drop-shadow(60px 80px 0 var(--caterpillar-color)) drop-shadow(0 160px 0 var(--caterpillar-color)) drop-shadow(0 320px 0 var(--caterpillar-color)) drop-shadow(0 640px 0 var(--caterpillar-color)) drop-shadow(0 -1280px 0 var(--caterpillar-color));
}
.caterpillar::before {
  content: "";
  position: absolute;
  top: calc(50% - 20px);
  left: 20px;
  width: 10px;
  height: 0;
  border: 10px solid var(--caterpillar-color);
  border-radius: 999px;
  transform: translateX(-100%);
  -webkit-animation: reach 1s ease-in-out infinite alternate;
          animation: reach 1s ease-in-out infinite alternate;
}
.caterpillar::after {
  content: "";
  position: absolute;
  top: calc(50% - 20px);
  right: 20px;
  width: 10px;
  height: 0;
  border: 10px solid var(--caterpillar-color);
  border-radius: 999px;
  transform: translateX(100%);
  -webkit-animation: reach 1s ease-in-out infinite alternate;
          animation: reach 1s ease-in-out infinite alternate;
}
.caterpillar .center {
  width: 50px;
  height: 80px;
  border: 20px solid var(--caterpillar-color);
  border-radius: 999px;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(50% - 10px), 0 calc(50% - 10px));
          clip-path: polygon(0 0, 100% 0, 100% calc(50% - 10px), 0 calc(50% - 10px));
  -webkit-animation: spring 1s ease-in-out infinite alternate;
          animation: spring 1s ease-in-out infinite alternate;
}

@-webkit-keyframes spring {
  0% {
    width: 45px;
    height: 110px;
  }
  10% {
    width: 45px;
    height: 110px;
  }
  90% {
    width: 60px;
    height: 80px;
  }
  100% {
    width: 60px;
    height: 80px;
  }
}

@keyframes spring {
  0% {
    width: 45px;
    height: 110px;
  }
  10% {
    width: 45px;
    height: 110px;
  }
  90% {
    width: 60px;
    height: 80px;
  }
  100% {
    width: 60px;
    height: 80px;
  }
}
@-webkit-keyframes reach {
  0% {
    width: 10px;
  }
  100% {
    width: 20px;
  }
}
@keyframes reach {
  0% {
    width: 10px;
  }
  100% {
    width: 20px;
  }
}
@-webkit-keyframes move {
  0% {
    transform: translateX(0);
  }
  2% {
    transform: translateX(0);
  }
  23% {
    transform: translateX(30px);
  }
  25% {
    transform: translateX(30px);
  }
  27% {
    transform: translateX(30px);
  }
  48% {
    transform: translateX(60px);
  }
  50% {
    transform: translateX(60px);
  }
  52% {
    transform: translateX(60px);
  }
  73% {
    transform: translateX(90px);
  }
  75% {
    transform: translateX(90px);
  }
  77% {
    transform: translateX(90px);
  }
  98% {
    transform: translateX(120px);
  }
  100% {
    transform: translateX(120px);
  }
}
@keyframes move {
  0% {
    transform: translateX(0);
  }
  2% {
    transform: translateX(0);
  }
  23% {
    transform: translateX(30px);
  }
  25% {
    transform: translateX(30px);
  }
  27% {
    transform: translateX(30px);
  }
  48% {
    transform: translateX(60px);
  }
  50% {
    transform: translateX(60px);
  }
  52% {
    transform: translateX(60px);
  }
  73% {
    transform: translateX(90px);
  }
  75% {
    transform: translateX(90px);
  }
  77% {
    transform: translateX(90px);
  }
  98% {
    transform: translateX(120px);
  }
  100% {
    transform: translateX(120px);
  }
}
</style>
</head>
<body>
  <div class="caterpillar">
  <div class="center"></div>
</div>
</body>
</html>

5. By Bennett Feely

Made by Bennett Feely. Windows 95 background in CSS. Source

CSS Background Pattern by Bennett Feely
<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
body {
  background: conic-gradient(from 45deg, #020681 0, #020681 90deg, #000337 90deg, #000337 180deg, #0818ff 180deg, #0818ff 270deg, #0f9bfe 270deg, #0f9bfe 360deg);
  background-size: 1em 1em;
  height: 100vh;
}
</style>
</head>
<body>
</body>
</html>

6. By Ana Tudor

Made by Ana Tudor. Shirt Background Pattern. Source

CSS Background Pattern by Ana Tudor
<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
html {
  height: 100vh;
  background: linear-gradient(90deg, #fff 0.25em, transparent 0), linear-gradient(90deg, #36599d 50%, transparent 0), linear-gradient(90deg, #643140 50%, #0a226a 0);
  background-size: 2.25em, 4.5em, 9em;
}
</style>
</head>
<body>
</body>
</html>

7. By Angela Velasquez

Made by Angela Velasquez. CSS Pineapple Fruit Background. Source

CSS Background Pattern by Angela Velasquez
<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
/* Color Palette */
/* Background styles */
body {
  background: radial-gradient(circle closest-side at 50px 50px, #FB8B24 3px, transparent 0), radial-gradient(circle closest-side at 40px 60px, #FB8B24 3px, transparent 0), radial-gradient(circle closest-side at 60px 60px, #FB8B24 3px, transparent 0), radial-gradient(circle closest-side at 50px 70px, #FB8B24 3px, transparent 0), radial-gradient(circle closest-side at 150px 165px, #FB8B24 3px, transparent 0), radial-gradient(circle closest-side at 140px 175px, #FB8B24 3px, transparent 0), radial-gradient(circle closest-side at 160px 175px, #FB8B24 3px, transparent 0), radial-gradient(circle closest-side at 150px 185px, #FB8B24 3px, transparent 0), radial-gradient(ellipse closest-side at 50px 60px, #F9A734 18px, transparent 0), radial-gradient(ellipse closest-side at 150px 175px, #F9A734 18px, transparent 0), radial-gradient(circle closest-side at 30px 40px, #F9D8D4 15px, transparent 0), radial-gradient(circle closest-side at 40px 35px, #36964C 15px, transparent 0), radial-gradient(circle closest-side at 70px 40px, #F9D8D4 15px, transparent 0), radial-gradient(circle closest-side at 60px 35px, #286E38 15px, transparent 0), radial-gradient(circle closest-side at 130px 155px, #F9D8D4 15px, transparent 0), radial-gradient(circle closest-side at 140px 150px, #36964C 15px, transparent 0), radial-gradient(circle at 170px 155px, #F9D8D4 15px, transparent 0), radial-gradient(circle at 160px 150px, #286E38 15px, transparent 0);
  background-color: #F9D8D4;
  background-size: 180px 210px;
  -webkit-animation: animatedBackground 0.5s cubic-bezier(0.61, -0.64, 0.58, 1.46) forwards;
          animation: animatedBackground 0.5s cubic-bezier(0.61, -0.64, 0.58, 1.46) forwards;
}

/* Animation */
@-webkit-keyframes animatedBackground {
  from {
    background-position: 0 50%;
  }
  to {
    background-position: 0 0;
  }
}
@keyframes animatedBackground {
  from {
    background-position: 0 50%;
  }
  to {
    background-position: 0 0;
  }
}
</style>
</head>
<body>
</body>
</html>

8. By Edmundo Santos

Made by Edmundo Santos. CSS dot pattern/grid background. Source

CSS Background Pattern by Edmundo Santos
<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title> 
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
body {
  background: linear-gradient(90deg, #161122 21px, transparent 1%) center, linear-gradient(#161122 21px, transparent 1%) center, #a799cc;
  background-size: 22px 22px;
}
</style>
</head>
<body>
</body>
</html>

9. By Dean

Made by Dean. Blueprint pattern. Source

CSS Background Pattern by Dean
<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
body {
  background-color: #269;
  background-image:
    linear-gradient(rgba(255,255,255,.5) 2px, transparent 2px),
    linear-gradient(90deg, rgba(255,255,255,.5) 2px, transparent 2px),
    linear-gradient(rgba(255,255,255,.28) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.28) 1px, transparent 1px);
  background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
  background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;
}
</style>
</head>
<body>
</body>
</html>

10. By Amelia Bellamy-Royds

Made by Amelia Bellamy-Royds. Neon Hexagons Animated Background Pattern. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
html, body, svg {
  width: 100%;
  height: 100%;
  margin: 0; padding: 0;
  display: block;
}

body:hover [filter],
body:active [filter]
{filter: none;}

#p {
  fill: black;
  fill-opacity: 0.2;
  stroke: white;
  stroke-width: 2.3px;
  stroke-dasharray: 200 188.5;
  animation: stroke-color 11s infinite linear;
}
#p .wrapper, #p use {
  animation: draw 4s infinite linear;  
}
#p use:nth-child(3){
  fill: white;
  fill-opacity: 0.1;
  animation-delay: -2s;
}

:root {
  animation: back-color 11s infinite linear;
}

@keyframes draw {
  from {
    stroke-dashoffset: 388.5;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes stroke-color {
  0%      {stroke: hsl(  0,100%,70%);}
  16.667% {stroke: hsl( 60,100%,70%);}
  33.333% {stroke: hsl(120,100%,70%);}
  50%     {stroke: hsl(180,100%,70%);}
  66.667% {stroke: hsl(240,100%,70%);}
  83.333% {stroke: hsl(300,100%,70%);}
  100%    {stroke: hsl(360,100%,70%);}
}
@keyframes back-color {
  0%      {background: hsl(  0,80%,15%);}
  16.667% {background: hsl( 60,80%,15%);}
  33.333% {background: hsl(120,80%,15%);}
  50%     {background: hsl(180,80%,15%);}
  66.667% {background: hsl(240,80%,15%);}
  83.333% {background: hsl(300,80%,15%);}
  100%    {background: hsl(360,80%,15%);}
}
</style>
</head>
<body>
  <svg>
  <filter id="glow">
    <feGaussianBlur stdDeviation="2"/>
    <feComposite in2="SourceGraphic"
                 operator="out" result="glow" />
    <feFlood flood-color="white" flood-opacity="0.2" />
    <feComposite in2="SourceGraphic"
                 operator="atop" result="light" />
    <feComposite in="glow" in2="light" />    
  </filter>
  <pattern id="p" patternUnits="userSpaceOnUse"
           width="180px" height="120px"
           patternTransform="scale(1,0.8660254)">
    <g filter="url(#glow)">
      <g class="wrapper">
        <path id="hex" pathLength="388.5"
                 d="M-30,-60 30,-60 60,0
                         30,60 -30,60 -60,0Z"
                 transform="scale(0.935)" />
      </g>
      <use xlink:href="#hex" x="0" y="+120" />
      <use xlink:href="#hex" x="+90" y="+60" />
      <use xlink:href="#hex" x="+180" y="0" />
      <use xlink:href="#hex" x="+180" y="120" />
    </g>
  </pattern>
  <rect fill="url(#p)" width="100%" height="100%"/>
</svg>
</body>
</html>

11. By yoksel

Made by yoksel. Hearts Background Pattern. Source

CSS Background Pattern by yoksel
<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
HTML {
  height: 100%;
}

BODY {
  background: linear-gradient(135deg, #E83A25 1.2em, rgba(232, 58, 37, 0) 1.2em) 0 4em, linear-gradient(-135deg, #E83A25 1.2em, rgba(232, 58, 37, 0) 1.2em) 0 4em, radial-gradient(circle at 7.16em 7.4em, #E83A25 1.02em, rgba(232, 58, 37, 0) 1.044em) 0 -4em, radial-gradient(circle at 0.84em 7.4em, #E83A25 1.02em, rgba(232, 58, 37, 0) 1.044em) 0 -4em, linear-gradient(135deg, #98CC96 1.2em, rgba(152, 204, 150, 0) 1.2em) 4em 0, linear-gradient(-135deg, #98CC96 1.2em, rgba(152, 204, 150, 0) 1.2em) 4em 0, radial-gradient(circle at 7.16em 7.4em, #98CC96 1.02em, rgba(152, 204, 150, 0) 1.044em) 4em 0, radial-gradient(circle at 0.84em 7.4em, #98CC96 1.02em, rgba(152, 204, 150, 0) 1.044em) 4em 0;
  background-size: 8em 8em;
  background-color: #FFE9A3;
  background-repeat: repeat;
  font: 16px/2 "Trebuchet MS", Verdana, sans-serif;
}
</style>
</head>
<body>
</body>
</html>