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
<!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
<!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
<!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
<!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
<!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
<!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
<!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
<!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
<!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>