10 CSS background templates you can use on your website
Background designs can dramatically change the look of your website. You can easily create stylish background patterns using CSS that will take your site design to the next level.
Below is a list of 10 background patterns that you can use in your projects.
1. The black hexagon
This black hexagon pattern provides a very clean hexagon lattice background. The title is clearly visible on this background. You can use this template if you are designing technological or architectural websites.
HTML code
<h1>The Black Hexagon</h1>
css codes
body {
font-family: 'Share Tech', sans-serif;
font-size: 68px;
color: white;
display: flex;
jsutify-content: center;
align-items: center;
margin: 0;
width: 100vw;
height: 100vh;
text-shadow: 8px 8px 10px
background-color:
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%239C92AC' fill-opacity='0.25' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"), linear-gradient(to right top, #343a40, #2b2c31, #211f22, #151314, #000000);
}h1 {
margin: 20px;
}
2. Blue Stripes
The blue stripes background pattern uses the linear gradient CSS property for creating gradient bands on a background. You can change the background color and gradient color to suit your needs.
HTML code
<div class="patterns pt1"></div>
css code
body {
margin: 0px;
}.patterns {
width: 100vw;
height: 100vw;
}
.pt1 {
background-size: 50px 50px;
background-color:
background-image: -webkit-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
background-image: -moz-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
background-image: -ms-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
background-image: -o-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
background-image: linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
}
3. The chessboard
You can easily create a chess board background design template using CSS. Try adjusting the colors to vary this design.
HTML code
<div class="patterns pt1"></div>
css code
body {
margin: 0px;
}.patterns {
width: 100vw;
height: 100vw;
}
.pt1 {
background-color:
background-size: 60px 60px;
background-position: 0 0, 30px 30px;
background-image: -webkit-linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), -webkit-linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
background-image: -moz-linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), -moz-linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
background-image: -ms-linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), -ms-linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
background-image: -o-linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), -o-linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
}
4. The Silent Sea
You can use these simple horizontal line patterns to add a static background to any HTML element.
HTML code
<div class="patterns pt1"></div>
css codes
body {
margin: 0px;
}.patterns {
width: 100vw;
height: 100vw;
}
.pt1 {
background-color:
background-size: 13px 13px, 29px 29px, 37px 37px, 53px 53px;
background-image: -webkit-linear-gradient(0, rgba(255, 255, 255, .07) 50%, transparent 50%), -webkit-linear-gradient(0, rgba(255, 255, 255, .13) 50%, transparent 50%), -webkit-linear-gradient(0, transparent 50%, rgba(255, 255, 255, .17) 50%), -webkit-linear-gradient(0, transparent 50%, rgba(255, 255, 255, .19) 50%);
background-image: -moz-linear-gradient(0, rgba(255, 255, 255, .07) 50%, transparent 50%), -moz-linear-gradient(0, rgba(255, 255, 255, .13) 50%, transparent 50%), -moz-linear-gradient(0, transparent 50%, rgba(255, 255, 255, .17) 50%), -moz-linear-gradient(0, transparent 50%, rgba(255, 255, 255, .19) 50%);
background-image: -ms-linear-gradient(0, rgba(255, 255, 255, .07) 50%, transparent 50%), -ms-linear-gradient(0, rgba(255, 255, 255, .13) 50%, transparent 50%), -ms-linear-gradient(0, transparent 50%, rgba(255, 255, 255, .17) 50%), -ms-linear-gradient(0, transparent 50%, rgba(255, 255, 255, .19) 50%);
background-image: -o-linear-gradient(0, rgba(255, 255, 255, .07) 50%, transparent 50%), -o-linear-gradient(0, rgba(255, 255, 255, .13) 50%, transparent 50%), -o-linear-gradient(0, transparent 50%, rgba(255, 255, 255, .17) 50%), -o-linear-gradient(0, transparent 50%, rgba(255, 255, 255, .19) 50%);
background-image: linear-gradient(0, rgba(255, 255, 255, .07) 50%, transparent 50%), linear-gradient(0, rgba(255, 255, 255, .13) 50%, transparent 50%), linear-gradient(0, transparent 50%, rgba(255, 255, 255, .17) 50%), linear-gradient(0, transparent 50%, rgba(255, 255, 255, .19) 50%);
}
5. Modern Brick
You can create a modern brick model in pure CSS using the tool linear gradient CSS property.
css codes
body {
background-image: linear-gradient(45deg, transparent 20%, black 25%, transparent 25%),
linear-gradient(-45deg, transparent 20%, black 25%, transparent 25%),
linear-gradient(-45deg, transparent 75%, black 80%, transparent 0),
radial-gradient(gray 2px, transparent 0);
background-size: 30px 30px, 30px 30px;
}
6. Web3 Style Background
You can create a Web3 style background by using a background image and adding a blur effect to it. This example uses a galaxy image from Unsplash. You can be creative and use an image of a galaxy, sea, landmarks, or anything else.
HTML code
<div class="card bg-blur">
<h1>Card with Gradient Background</h1>
</div>
css codes
:root {
--bg-image: url('https://images.unsplash.com/photo-1538370965046-79c0d6907d47?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1169&q=80');
}body {
background-color:
font-family: sans-serif;
display: flex;
}
.card {
margin: auto;
padding: 1rem;
height: 300px;
width: 300px;
text-align: center;
color: white;
display: flex;
align-items: center;
justify-content: center;
position: relative;
background-color: gray;
border-radius: 10px;
}
.bg-blur {
overflow: hidden;
background-color: transparent;
}
.bg-blur::before {
content: '';
background-image: var(--bg-image);
background-size: cover;
height: 100%;
width: 100%;
position: absolute;
filter: blur(30px);
z-index: -1;
}
7. Gradient Background Animation
Gradient background animations are widely used in modern websites. Stay in trend and use gradient animation with background. You can also customize the gradient colors according to your needs.
HTML code
<div class="d-flex flex-column justify-content-center w-100 h-100"></div>
css codes
body {
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background-size: 400% 400%;
animation: gradient 15s ease infinite;
height: 100vh;
}
@keyframes gradient {
0% {
background-position: 0% 50%;
}50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
8. Curvy Waves
You can create a simple curved wave pattern using the radial gradient CSS property.
HTML code
<div class="patterns pt1"></div>
css code
body {
margin: 0px;
}.patterns {
width: 100vw;
height: 100vw;
}
.pt1 {
background: -moz-radial-gradient(0% 2%, circle, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), -moz-radial-gradient(100% 100%, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), none;
background: -webkit-radial-gradient(0% 2%, circle, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), -webkit-radial-gradient(100% 100%, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), none;
background: -ms-radial-gradient(0% 2%, circle, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), -ms-radial-gradient(100% 100%, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), none;
background: -o-radial-gradient(0% 2%, circle, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), -o-radial-gradient(100% 100%, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), none;
background: radial-gradient(0% 2%, circle, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), radial-gradient(100% 100%, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), none;
background-size: 20px 20px;
}
9. Tablecloth
Need a standard background pattern for your HTML div? Try this tablecloth pattern.
css code
body {
background: white;
background-image: linear-gradient(90deg, rgba(200,0,0,.5) 50%, transparent 0),
linear-gradient(rgba(200,0,0,.5) 50%, transparent 0);
background-size: 30px 30px;
}
10. Sliding diagonals
In this effect, the diagonal colors slide and overlap. The smooth color mixing animation can add an attractive touch to your website.
HTML code
<div class="bg"></div>
<div class="bg bg2"></div>
<div class="bg bg3"></div>
<div class="content">
<h1>Sliding Diagonals Background Effect</h1>
</div>
css codes
html {
height:100%;
}body {
margin:0;
}
.bg {
animation:slide 3s ease-in-out infinite alternate;
background-image: linear-gradient(-60deg, #6c3 50%, #09f 50%);
bottom:0;
left:-50%;
opacity:.5;
position:fixed;
right:-50%;
top:0;
z-index:-1;
}
.bg2 {
animation-direction:alternate-reverse;
animation-duration:4s;
}
.bg3 {
animation-duration:5s;
}
.content {
background-color:rgba(255,255,255,.8);
border-radius:.25em;
box-shadow:0 0 .25em rgba(0,0,0,.25);
box-sizing:border-box;
left:50%;
padding:10vmin;
position:fixed;
text-align:center;
top:50%;
transform:translate(-50%, -50%);
}
h1 {
font-family:monospace;
}
@keyframes slide {
0% {
transform:translateX(-25%);
}
100% {
transform:translateX(25%);
}
}
Improve your website using CSS
Use these CSS background patterns to beautify your website design. You can also increase your CSS productivity by using some cool CSS tips and tricks. They can help you create elegant CSS designs with just a few lines of code.
Read more
About the Author