3 ways to implement transparent squares in CSS

Students who often use photoshop are familiar with such a transparent square background, and some are called "chessboard" effects, as follows

The realization of this effect must be inseparable from the gradient, this article introduces 3 CSS tips for drawing transparent squares

1. Linear-gradient

linear-gradient can be said to be the earliest application to achieve this effect. Of course, the implementation is also the most ingenious and the most complicated. The principle is to draw two right-angled triangles, and then stitch them together, as follows

The smallest splicing unit is actually a graph like this, a gradient in the 45deg direction

For the convenience of observation, the colors and sizes of all demonstrations below have been specially treated, the same below

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

It's just like this

Then draw another copy of the same, dislocation stitching

The following is a moving picture to fully express the implementation process

Below 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;
}

2. Repeating-linear-gradient

repeating-linear-gradient can also achieve a "chessboard" effect, and it is easier to understand, but requires a little extra trick

First draw a horizontal stripe pattern

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

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)
}

If it's grey, it looks like this

The place where the stripes are interlaced is overlapping. In this case, you can consider adding the background blending mode (for the blending mode, you can refer to this article by Mr. Zhang Xinxu: -depth understanding of CSS mix-blend-mode filter screen blending mode ), The "screen" is used here, which filters out the black part, and if it is a light gray, the remaining color is almost "white". As shown below, the "chessboard" effect comes out

.bg{
  background-blend-mode: screen;
}

The following is a moving picture to fully express the implementation process

Below 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;
}

Moreover, this method can achieve the effect of any inclination angle, such as

However, the limitations of the blending mode are also many. At present, it looks fine in this light gray. It may not work to change a color, such as this

This needs to be used as appropriate according to the actual situation

Three, conc-gradient

conc-gradient tapered gradient can be regarded as the official solution (there is this chessboard case on MDN), but the compatibility is slightly worse

The following is a moving picture to fully express the implementation process

Below 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;
}

In fact, you can also use repeating-conic-gradient optimize it (the principle is the same, so it is classified as the same method), the last two colors are repeated from the first two, so you can use only two colors to achieve

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

This should be considered the most streamlined pure CSS solution.

4. In fact, these may not be used

Although CSS gradients can subtly implement these patterns, you may not do this in your usual work. Just cut the image directly, such as drawing an SVG like this directly in Figma.

Then just use this picture

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

It takes less than 10 seconds to complete such a "chessboard" effect, which is simple and fast, and has no compatibility issues.

Are CSS gradients just tasteless?

of course not! CSS gradients are drawn dynamically. You can dynamically adjust the color, size, or shape, which is not possible with static images. For example, I am afraid that you need to save multiple pictures, but for gradients, just change a 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;
}

More importantly, learning to master gradients is very helpful to improve your CSS level. However, it also needs to be based on the actual situation. If you don't need to dynamically change some styles, SVG images are also a good way, but don't stop thinking 🤔.