Background patterns can radically change the look of your website, providing a fresh and captivating design. You can easily create elegant background patterns using CSS that will elevate your site's aesthetic.
Here are some exceptional CSS background patterns that you can seamlessly incorporate into your projects.
1. The Black Hexagon
The code used in these background CSS examples is available in a GitHub repository and is free for you to use under the MIT license.
This black hexagon pattern provides a very neat hexagon network background. The title is clearly visible against this background. You can use this pattern if you're designing any technological or architectural websites.
HTML Code
<h1>The Black Hexagon</h1>
CSS Code
body {
font-family: 'Share Tech', sans-serif;
font-size: 68px;
color: white;
display: flex;
justify-content: center;
align-items: center;
margin: 0;
width: 100vw;
height: 100vh;
text-shadow: 8px 8px 10px #0000008c;
background-color: #343a40;
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. The Blue Strips
The blue strip CSS background pattern uses the linear-gradient CSS property to create gradient strips over a background. You can change the background color and the gradient color to meet your requirements.
HTML Code
<div class="patterns pt1"></div>
CSS Code
body {
margin: 0px;
}
.patterns {
width: 100vw;
height: 100vw;
}
.pt1 {
background-size: 50px 50px;
background-color: #0ae;
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 Chess Board
You can easily create a chessboard background design pattern 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: #eee;
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 CSS background to any HTML element.
HTML Code
<div class="patterns pt1"></div>
CSS Code
body {
margin: 0px;
}
.patterns {
width: 100vw;
height: 100vw;
}
.pt1 {
background-color: #026873;
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. The Modern Brick
You can create a pure CSS modern brick pattern using the linear-gradient CSS property.
CSS Code
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 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, monuments, or anything else.
HTML Code
<div class="card bg-blur">
<h1>Card with Gradient Background</h1>
</div>
CSS Code
: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: #1D1E22;
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 on-trend and use the gradient animation with the 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 Code
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 curvy 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. Table Cloth
Need a standard background pattern for your HTML div? Try this table cloth 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 with each other. The smooth animation of mixing colors 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 Code
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%);
}
}
11. Generative Art
If you're looking for a simple and modern CSS background idea, the generative art background design could be one of the best picks.
CSS Code
body:before {
content: "";
position: fixed;
inset: -50px;
background:
repeating-radial-gradient(#000 0 0.0001%,#fff 0 0.0002%)
60% 60%/3000px 3000px,
repeating-conic-gradient(#000 0 0.0001%,#fff 0 0.0002%)
40% 40%/4000px 3000px;
background-blend-mode: difference;
filter: blur(2px) contrast(100) brightness(40);
mix-blend-mode: lighten;
}
body {
background: #00DFFC;
margin: 0;
min-height: 100vh;
}
html {
background: #fff;
}
12. Halftone
You can use this old halftone pattern, a common CSS background example, to add an aesthetic touch to your website. You only need to make use of powerful CSS background properties to create excellent background designs.
HTML Code
<div></div>
CSS Code
div {
position: relative;
height: 100vh;
background: #fff;
filter: contrast(7);
--mask: linear-gradient(red, rgba(0, 0, 0, 0.45));
}
div::before {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: radial-gradient(#000, transparent) 0 0/1em 1em space;
-webkit-mask: var(--mask);
mask: var(--mask);
content: "";
}
Spruce Up Your Website Using CSS
Use these CSS background patterns to spruce up the design of your website. You can also increase your CSS productivity using some cool CSS tips and tricks. They can help you create slick designs in CSS with just a few lines of code.