One of the techniques to make your site look better is adding a background pattern. I particularly like the squared notebook pattern found in Moleskine. It also creates a beautiful background if you layer it with a gradient image. Here is how you can do it with CSS.
body {
height: 100vh;
background: #111;
background-image: linear-gradient(
35deg,
hsla(0, 0%, 7%, 1),
80%,
hsla(0, 0%, 7%, 0.8)
),
linear-gradient(#bbb 1px, transparent 0),
linear-gradient(90deg, #bbb 1px, transparent 0);
background-size: 100% 100%, 2vw 2vw, 2vw 2vw;
}
See the Pen
Squared Patterns Background CSS by Sayz Lim (@sayzlim)
on CodePen.
The background-image
property is only known for displaying images, but you can also use CSS image functions to create an image. We can also layer multiple images to create an effect where the gradient gradually uncovers the grid patterns.
The background-image above is made from three layers:
background-image: linear-gradient(
35deg,
hsla(0, 0%, 7%, 1),
80%,
hsla(0, 0%, 7%, 0.8)
),
linear-gradient(#bbb 1px, transparent 0),
linear-gradient(90deg, #bbb 1px, transparent 0);
90deg
. You can also use to right
as the value.background-size: 100% 100%, 2vw 2vw, 2vw 2vw;
After creating these background images, we want to set the size of each image with background-size
. We set the first layer to 100% because we want to fill the body container completely. Then we set the same size for the square — use 20px
instead of 2vw
if you want the dimension to stay fixed.
If you want the background to start at 50% of each square, you can play around with the color stops. Here is a modified version.
body {
height: 100vh;
background: #111;
background-image: linear-gradient(
35deg,
hsla(0, 0%, 7%, 1),
80%,
hsla(0, 0%, 7%, 0.6)
),
linear-gradient(transparent calc(50% - 1px), #fff 50%, transparent calc(50% + 1px) 100%),
linear-gradient(to right, transparent calc(50% - 1px), #fff 50%, transparent calc(50% + 1px) 100%);
background-size: 100% 100%, 2vw 2vw, 2vw 2vw;
}
References: