8+ CSS Square Background Examples

This post contains a total of 8+ CSS Square Background Examples with Source Code. All these Square Backgrounds are made using CSS.

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

Related Posts

CSS Square Background Examples

1. By Tobias Bogliolo

Made by Tobias Bogliolo. Square Background Pattern. Source

CSS Square Background by Tobias Bogliolo
<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
:root {
  background-color: rgba(165, 210, 255, .4);
  background-image:
    linear-gradient(90deg, rgba(165, 210, 255, .3) 50%, transparent 50%),
    linear-gradient(rgba(165, 210, 255, .3) 50%, transparent 50%);
  background-size: 40px 40px;
}
</style>
</head>
<body>
</body>
</html>

2. By Tankred

Made by Tankred. Japanese Cube Background. Source

CSS Square Background by Tankred
<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
body {
background-color:#556;
background-image: linear-gradient(30deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
linear-gradient(150deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
linear-gradient(30deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
linear-gradient(150deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
linear-gradient(60deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a), 
linear-gradient(60deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a);
background-size:80px 140px;
background-position: 0 0, 0 0, 40px 70px, 40px 70px, 0 0, 40px 70px;
}
</style>
</head>
<body>
</body>
</html>

3. By Fabrice W

Made by Fabrice W. Pure CSS Blueprint Pattern. Source

CSS Square Background by Fabrice W
<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
@import url(https://fonts.googleapis.com/css?family=Open+Sans);


html{
  background:radial-gradient(50% 100%, rgba(255,255,255,.2), rgba(255,255,255,0)),
    
             linear-gradient(90deg, rgba(50,100,170,.7) 1px, transparent 0),
             linear-gradient(180deg, rgba(50,100,170,.7) 1px, transparent 0),
    
             linear-gradient(90deg, rgba(50,100,170,.4) 1px, transparent 0),
             linear-gradient(180deg, rgba(50,100,170,.4) 1px, transparent 0),
    
             linear-gradient(90deg, rgba(50,100,170,1) 2px, transparent 0),
             linear-gradient(180deg, rgba(50,100,170,1) 2px, transparent 0);
  
  background-color:#074b97;
  
  background-size:100% 100%, 
    
                  50px 50px,
                  50px 50px,
    
                  25px 25px,
                  25px 25px,
    
                  100px 100px, 
                  100px 100px;
  
  background-attachment: local;
  
  width:100%;
  height:100%;
}

* { box-sizing: border-box } 

body{
  font-family:'Open Sans';
  color:white;
  margin:0;
}


h1{
  font-size:24pt;
  text-align:center;
  padding:8px;
}

</style>
</head>
<body>
  <h1>Pure CSS Blueprint</h1>
  <script src='https://raw.github.com/LeaVerou/prefixfree/gh-pages/prefixfree.min.js'></script>
</body>
</html>

4. By Hornebom

Made by Hornebom. Simple Square Background Pattern. Source

CSS Square Background by Horneborn
<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
*, *:before, *:after {
  margin:0;
  padding:0;
  box-sizing:border-box;
}
html,
body {
  width: 100%;
  height: 100%;
}
body {
  background-color: #f6f6f6;
  background-image:
    linear-gradient(90deg, #cdcccc 0px, #cdcccc 1px, transparent 1px, transparent 99px,  transparent 100px),
    linear-gradient(#cdcccc 0px, #cdcccc 1px, transparent 1px, transparent 99px,  transparent 100px),
    linear-gradient(#e0e0e0 0px, #e0e0e0 1px, transparent 1px, transparent 99px,  transparent 100px),
    linear-gradient(90deg, #e0e0e0 0px, #e0e0e0 1px, transparent 1px, transparent 99px,  transparent 100px),
    linear-gradient(transparent 0px, transparent 5px, #f6f6f6 5px, #f6f6f6 95px, transparent 95px, transparent 100px),
    linear-gradient(90deg, #e0e0e0 0px, #e0e0e0 1px, transparent 1px, transparent 99px, #e0e0e0 99px, #e0e0e0 100px),
    linear-gradient(90deg, transparent 0px, transparent 5px, #f6f6f6 5px, #f6f6f6 95px, transparent 95px, transparent 100px),
    linear-gradient(transparent 0px, transparent 1px, #f6f6f6 1px, #f6f6f6 99px, transparent 99px, transparent 100px),
    linear-gradient(#cdcccc, #cdcccc);
  background-size:100px 100%, 100% 100px, 100% 10px, 10px 100%, 100% 100px, 100px 100%, 100px 100%, 100px 100px, 100px 100px;
}
</style>
</head>
<body>
</body>
</html>

5. By Joshua Hibbert

Made by Joshua Hibbert. CSS Cube Background Pattern. Source

CSS Square Background by Joshua Hibbert
<!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>
html {
  background-color: #f76;
  background-image:
  	linear-gradient(30deg, #fee 13.5%, transparent 13.5%, transparent 86.5%, #fee 86.5%),
		linear-gradient(-30deg, #fee 13.5%, transparent 13.5%, transparent 86.5%, #fee 86.5%),
		linear-gradient(30deg, #dcc 13.5%, transparent 13.5%, transparent 86.5%, #dcc 86.5%),
		linear-gradient(-30deg, #dcc 13.5%, transparent 13.5%, transparent 86.5%, #dcc 86.5%),
		linear-gradient(30deg, #fee 13.5%, transparent 13.5%, transparent 86.5%, #fee 86.5%),
		linear-gradient(-30deg, #fee 13.5%, transparent 13.5%, transparent 86.5%, #fee 86.5%),
		linear-gradient(30deg, #dcc 13.5%, transparent 13.5%, transparent 86.5%, #dcc 86.5%),
		linear-gradient(-30deg, #dcc 13.5%, transparent 13.5%, transparent 86.5%, #dcc 86.5%),
		linear-gradient(45deg, #544 25%, transparent 25%, transparent 75%, #544 75%),
		linear-gradient(45deg, #544 25%, transparent 25%, transparent 75%, #544 75%);
	background-position:
		0em 2em,
		0em 2em,
		2em 4em,
		2em 4em,
		4em 2em,
		4em 2em,
		6em 4em,
		6em 4em,
		0em 0em,
		2em 2em;
	background-size:
		8em 4em,
		8em 4em,
		8em 4em,
		8em 4em,
		8em 4em,
		8em 4em,
		8em 4em,
		8em 4em,
		4em 4em,
		4em 4em;
}
</style>
</head>
<body>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

6. By Michael van den Berg

Made by Michael van den Berg. Blue Square Background Pattern. Source

CSS Square Background by Micheal Van Den Berg
<!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 {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  color: white;
  text-shadow: 0px 0px 5px #123456;
  height: 100vh;
  background: linear-gradient(-135deg, #224c98 10%, transparent), repeating-linear-gradient(45deg, #224c98 0%, rgba(31, 48, 94, 0.6) 5%, transparent 5%, transparent 10%), repeating-linear-gradient(-45deg, rgba(34, 76, 152, 0.4) 0%, rgba(31, 48, 94, 0.5) 5%, transparent 5%, transparent 10%);
  background-color: rgba(34, 76, 152, 0.25);
}
.title {
  font-size: 5em;
  font-weight: bold;
  margin-bottom: 0.2em;
}

.text {
  font-size: 1.25em;
}

@media only screen and (min-width: 420px) {
  .title {
    font-size: 8em;
  }

  .text {
    font-size: 1.5em;
  }
}
</style>
</head>
<body>
  <svg xmlns="http://www.w3.org/2000/svg" style="display:none">
	<symbol id="github" viewBox="0 0 24 24">
 		<path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
	</symbol>

	<symbol id="codepen" viewBox="0 0 24 24">
  	<path d="m.455 16.512 10.969 7.314c.374.23.774.233 1.152 0l10.969-7.314c.281-.187.455-.522.455-.857v-7.312c0-.335-.174-.67-.455-.857l-10.969-7.313c-.374-.23-.774-.232-1.152 0l-10.969 7.313c-.281.187-.455.522-.455.857v7.312c0 .335.174.67.455.857zm10.514 4.528-8.076-5.384 3.603-2.411 4.473 2.987zm2.062 0v-4.808l4.473-2.987 3.603 2.411zm8.907-7.314-2.585-1.727 2.585-1.728zm-8.907-10.767 8.076 5.384-3.603 2.411-4.473-2.987zm-1.031 6.602 3.643 2.438-3.643 2.438-3.643-2.438zm-1.031-6.602v4.808l-4.473 2.987-3.603-2.411zm-8.906 7.314v-.001l2.585 1.728-2.585 1.728z" />
	</symbol>
</svg>
</ul>
</body>
</html>

7. By foxeisen

Made by foxeisen. CSS3 gradient Square pattern. Source

CSS Square Background by Foxeisen
<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
body {
  background: 
    radial-gradient(black 3px, transparent 4px),
    radial-gradient(black 3px, transparent 4px),
    linear-gradient(#fff 4px, transparent 0),
    linear-gradient(45deg, transparent 74px, transparent 75px, #a4a4a4 75px, #a4a4a4 76px, transparent 77px, transparent 109px),
    linear-gradient(-45deg, transparent 75px, transparent 76px, #a4a4a4 76px, #a4a4a4 77px, transparent 78px, transparent 109px),
  #fff;
  background-size: 109px 109px, 109px 109px,100% 6px, 109px 109px, 109px 109px;
  background-position: 54px 55px, 0px 0px, 0px 0px, 0px 0px, 0px 0px;
}
</style>
</head>
<body>
</body>
</html>

8. By marinda

Made by marinda. Square Background pattern with CSS blend mode. Source

CSS Square Background by marinda
<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
html {
  height: 100%;
  background: repeating-linear-gradient(-45deg, transparent, transparent 1em, rgba(127, 215, 245, 0.4) 0, rgba(127, 215, 245, 0.1) 2em, transparent 0, transparent 1em, rgba(127, 215, 245, 0.3) 0, rgba(127, 215, 245, 0.2) 4em, transparent 0, transparent 1em, rgba(192, 235, 250, 0.6) 0, rgba(192, 235, 250, 0.2) 2em), repeating-linear-gradient(45deg, transparent, transparent 1em, rgba(127, 215, 245, 0.4) 0, rgba(127, 215, 245, 0.1) 2em, transparent 0, transparent 1em, rgba(127, 215, 245, 0.3) 0, rgba(127, 215, 245, 0.2) 4em, transparent 0, transparent 1em, rgba(192, 235, 250, 0.4) 0, rgba(192, 235, 250, 0.1) 2em), #FFF;
  background-blend-mode: multiply;
}
</style>
</head>
<body>
</body>
</html>

9. By yoksel

Made by yoksel. Simple Square Pattern. Source

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

BODY {
  background: linear-gradient(to right top, rgba(255, 255, 255, 0) 0, #730046 0, #730046 0.48em, rgba(255, 255, 255, 0) 0.48em) 3em 0, linear-gradient(to left bottom, rgba(255, 255, 255, 0) 0, #730046 0, #730046 0.48em, rgba(255, 255, 255, 0) 0.48em) 3em 0, linear-gradient(to right bottom, rgba(255, 255, 255, 0) 0, #730046 0, #730046 0.48em, rgba(255, 255, 255, 0) 0.48em) 3em 0, linear-gradient(to left top, rgba(255, 255, 255, 0) 0, #730046 0, #730046 0.48em, rgba(255, 255, 255, 0) 0.48em) 3em 0, linear-gradient(to right top, rgba(255, 255, 255, 0) 0, #730046 0, #730046 0.48em, rgba(255, 255, 255, 0) 0.48em) 0 3em, linear-gradient(to left bottom, rgba(255, 255, 255, 0) 0, #730046 0, #730046 0.48em, rgba(255, 255, 255, 0) 0.48em) 0 3em, linear-gradient(to right bottom, rgba(255, 255, 255, 0) 0, #730046 0, #730046 0.48em, rgba(255, 255, 255, 0) 0.48em) 0 3em, linear-gradient(to left top, rgba(255, 255, 255, 0) 0, #730046 0, #730046 0.48em, rgba(255, 255, 255, 0) 0.48em) 0 3em, linear-gradient(to right top, rgba(255, 255, 255, 0) 0, #C93C00 0, #C93C00 0.48em, #E88801 0, #E88801 0.96em, #FFC200 0, #FFC200 1.44em, #BFBB11 0, #BFBB11 1.92em, #730046 0, #730046 2.4em, rgba(255, 255, 255, 0) 0.48em) 0 0, linear-gradient(to right bottom, rgba(255, 255, 255, 0) 0, #C93C00 0, #C93C00 0.48em, #E88801 0, #E88801 0.96em, #FFC200 0, #FFC200 1.44em, #BFBB11 0, #BFBB11 1.92em, #730046 0, #730046 2.4em, rgba(255, 255, 255, 0) 0.48em) 0 0, linear-gradient(to left top, rgba(255, 255, 255, 0) 0, #C93C00 0, #C93C00 0.48em, #E88801 0, #E88801 0.96em, #FFC200 0, #FFC200 1.44em, #BFBB11 0, #BFBB11 1.92em, #730046 0, #730046 2.4em, rgba(255, 255, 255, 0) 0.48em) 0 0, linear-gradient(to left bottom, rgba(255, 255, 255, 0) 0, #C93C00 0, #C93C00 0.48em, #E88801 0, #E88801 0.96em, #FFC200 0, #FFC200 1.44em, #BFBB11 0, #BFBB11 1.92em, #730046 0, #730046 2.4em, rgba(255, 255, 255, 0) 0.48em) 0 0, linear-gradient(to right top, rgba(255, 255, 255, 0) 0, #C93C00 0, #C93C00 0.48em, #E88801 0, #E88801 0.96em, #FFC200 0, #FFC200 1.44em, #BFBB11 0, #BFBB11 1.92em, #730046 0, #730046 2.4em, rgba(255, 255, 255, 0) 0.48em) 3em 3em, linear-gradient(to right bottom, rgba(255, 255, 255, 0) 0, #C93C00 0, #C93C00 0.48em, #E88801 0, #E88801 0.96em, #FFC200 0, #FFC200 1.44em, #BFBB11 0, #BFBB11 1.92em, #730046 0, #730046 2.4em, rgba(255, 255, 255, 0) 0.48em) 3em 3em, linear-gradient(to left top, rgba(255, 255, 255, 0) 0, #C93C00 0, #C93C00 0.48em, #E88801 0, #E88801 0.96em, #FFC200 0, #FFC200 1.44em, #BFBB11 0, #BFBB11 1.92em, #730046 0, #730046 2.4em, rgba(255, 255, 255, 0) 0.48em) 3em 3em, linear-gradient(to left bottom, rgba(255, 255, 255, 0) 0, #C93C00 0, #C93C00 0.48em, #E88801 0, #E88801 0.96em, #FFC200 0, #FFC200 1.44em, #BFBB11 0, #BFBB11 1.92em, #730046 0, #730046 2.4em, rgba(255, 255, 255, 0) 0.48em) 3em 3em;
  background-size: 6em 6em;
  background-color: #E9F1DF;
  background-repeat: repeat;
  font: 16px/2 "Trebuchet MS", Verdana, sans-serif;
}
</style>
</head>
<body>
  <!-- nothing -->
</body>
</html>