Those of you who use Photoshop regularly will be familiar with the background of this transparent grid, also known as the “checkerboard” effect, as shown below

Gradients are essential to achieving this effect. Here are 3 tips for drawing transparent squares in CSS

A, linear gradient

Linear-gradient is arguably the first app to achieve this effect, and certainly the most subtle and complex. It works by drawing two right triangles and stitching them together as follows

The minimum splicing unit is actually a shape like this, a gradient in the direction of 45deg

All of the colors and sizes shown below have been specially treated for ease of observation, as follows

.bg{
  background-image: linear-gradient(45deg.#eee 25%, transparent 25%, transparent 75%.#eee 75%)}Copy the code

That’s what it looks like when it’s tiled

And then draw another copy of the same, misaligned splicing

Here is a GIF to show the implementation in its entirety

Here is the complete code

.bg{
    width: 400px;
    height: 300px;
    background-image: linear-gradient(45deg.#eee 25%, transparent 25%, transparent 75%.#eee 75%), linear-gradient(45deg.#eee 25%, transparent 25%, transparent 75%.#eee 75%);
    background-size: 16px 16px;
    background-position: 0 0.8px 8px;
}
Copy the code

Second, repeating – linear gradient

Repeating-linear-gradient also achieves the checkerboard effect and is a little easier to understand, but requires a little extra trickery

Start by drawing a horizontal stripe pattern

.bg{
  background-image: repeating-linear-gradient(#eee 0 8px, transparent 0 16px)}Copy the code

Then draw a vertical stripe

.bg{
  background-image: repeating-linear-gradient(#eee 0 8px, transparent 0 16px), repeating-linear-gradient(90deg.#eee 0 8px, transparent 0 16px)}Copy the code

If it’s gray, it looks something like this

In this case, background blending mode can be added. (For blending mode, please refer to this article by Zhang Xinxu: CSS mix-blending-mode screen is used to filter out the black, but if it is a light grey, the remaining color is almost white. As shown below, the “checkerboard” effect appears

.bg{
  background-blend-mode: screen;
}
Copy the code

Here is a GIF to show the implementation in its entirety

Here is the complete code

.bg{
    width: 400px;
    height: 300px;
    background-image: repeating-linear-gradient(#eee 0 8px, transparent 0 16px), repeating-linear-gradient(90deg.#eee 0 8px, transparent 0 16px);
  	background-blend-mode: screen;
}
Copy the code

Moreover, this method can achieve arbitrary inclination effect, for example

However, there are a lot of limitations of the blend mode. At present, it looks ok in this light gray, but maybe not in another color, such as this one

This needs to be used according to the actual situation

Three, the conc – gradient

Con-gradient is the official solution (MDN has this checkerboard example), but less compatible

Here is a GIF to show the implementation in its entirety

Here is the complete code

.bg{
    width: 400px;
    height: 300px;
    background-image: conic-gradient(#eee 0 25%, transparent 0 50%.#eee 0 75%, transparent 0);
  	background-size: 16px 16px;
}
Copy the code

In fact, it can be optimized by repeating-Conic-gradient (the principle is the same, so it belongs to the same method). The last two colors are repeated from the first two, so it can be realized with only two colors

.bg{
    width: 400px;
    height: 300px;
    background-image: repeating-conic-gradient(#eee 0 25%, transparent 0 50%);
  	background-size: 16px 16px;
}
Copy the code

This is probably the most streamlined of all pure CSS solutions

Four, may not actually use these

Although CSS gradients can be used to implement these patterns in a clever way, it is not possible to do this in normal work. Instead, you can simply cut the SVG in Figma, for example

And then you can just use this picture

.bg{
    width: 400px;
    height: 300px;
    background-image: url('xxx.svg');
  	background-size: 16px 16px;
}
Copy the code

This “checkerboard” effect was achieved in less than 10 seconds, simple and quick, with no compatibility issues.

Is CSS tween a weakness?

Of course not! CSS gradients are dynamic, and you can adjust the color, size, or shape dynamically, which is not possible with static images. For example, you may need to save multiple images, but for gradients, just change the color value

.bg{
    width: 400px;
    height: 300px;
    background-image: repeating-conic-gradient(var(--color) 0 25%, transparent 0 50%);
  	background-size: 16px 16px;
}
.bg1{
  --color1: gray;
}
.bg2{
  --color1: yellow;
}
.bg1{
  --color1: blue;
}
Copy the code

More importantly, learning to master gradients is a great way to improve your CSS skills. However, depending on the situation, SVG images are a good way to go if you don’t need to change some styles dynamically, but don’t stop thinking 🤔.