Use CSS Skillfully to Build Gradient Color QR Code

Today, there is a very interesting question in the group, asking me how to implement a color QR code with gradient, like this:

Very interesting question, we searched qrcode on Baidu Google, and we can find many tools for making QR codes online, some of them also have the function of making gradient QR codes. But most of them are implemented in Canvas or other programming languages.

If we already have a normal QR code with black characters on a white background, want to turn it into a gradient QR code? How to do it?

This article will introduce, uses CSS to quickly turn an ordinary black QR code into any color gradient QR code we want.

Powerful Blend Mode

Have an original image and want to change its color. In CSS, we can quickly think of filter , or mix-blend-mode .

Here, we need to use mixed mode mix-blend-mode . Blending modes are most commonly found in photoshop and are one of the most powerful features in Photoshop. Currently CSS has native support for most blend modes.

The principle is actually very simple. We implement a gradient graph. After this graph overlaps the QR code with black characters on a white background through mix-blend-mode: lighten in the blend mode, the white area in the QR code will remain unchanged, while the second The black areas in the dimensional code will appear as the color in the gradient pattern.

It sounds a bit confusing. Through a schematic diagram, we can understand it at a glance. We only need two layers, the original QR code is one layer, and then the gradient pattern is superimposed on it, and set mix-blend-mode: lighten :

<div class="g-container">
    <img src="qrcode.png">
</div>

.g-container {
    position: relative;
    width: 200px;
    height: 200px;
    
    &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background: linear-gradient(45deg, #673ab7, #ff5722);
        mix-blend-mode: lighten;
    }
}

Here, we save a label with the pseudo element of the parent element, used as a gradient layer, the actual overlap effect, I made an animation:

In this way, we can turn a black QR code image into a gradient color through the blending mode.

QR code middle hollow

Of course, this is not over yet, sometimes, there will be some patterns in the middle of our QR code, there is a round or square picture.

If you use the above method, there will be some flaws:

Then, we also need to hollow out the gradient pattern according to the style of the QR code!

Interestingly, there are two patterns in the middle of the QR code: , circular, and , rectangular, . The processing methods for these two QR codes are not the same.

A circle is hollowed out in the center of the gradient pattern

For a QR code whose center pattern is a circle, we only need to implement such a gradient and then superimpose it:

This is relatively simple. Since it was originally a linear gradient, a circle needs to be hollowed out in the middle. The best way is to use mask :

div {
    background: linear-gradient(45deg, rgb(51, 102, 153), rgb(255, 0, 204));
    mask: radial-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 16%, rgb(0, 0, 0) 16%);
}

The center of the gradient pattern hollows out a rectangle

However, if the middle is a rectangle, it is not easy to do, we need to implement such a graphic based on the gradient pattern:

There are actually many methods. For example, we imagine the middle transparent part as the content part of a div, and the surrounding gradient color area is the border area.

Of course, I used clip-path here. Using it, it is also very convenient to realize the hollow rectangle:

div {
    background: linear-gradient(45deg, rgb(51, 102, 153), rgb(255, 0, 204));
    clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 34%, 66% 34%, 66% 66%, 34% 66%, 34% 100%, 100% 100%, 100% 0%);
}

Make a QR code coloring tool

Based on the above knowledge, we can simply build a gradient color QR code tool.

Here I simply implement one:

We can quickly create a gradient color QR code by uploading a common QR code, customizing the gradient color, and choosing whether to hollow out, the type and size of the hollow.

Just to demonstrate:

A small tool that uses CSS at its core is done.

The complete code, you can click here: CodePen - Make A Gradient QrCode

finally

To sum up, this article introduces the tips of using CSS blending mode to get gradient QR code, and uses mask or clip-path hollow gradient graphics. If you still have questions, I recommend you to read my following articles:

• incredible mix-blend-mode
• incredible blend mode background-blend-mode
• Two lines of CSS code to achieve arbitrary color assignment technology for pictures
• Fantastic CSS MASK
• use of CSS to achieve colorful triangle border animation

Well, this is the end of this article, I hope it helps you :)

If you want to get the most interesting CSS information, don't miss my official account -- iCSS front-end anecdotes 😄

More wonderful CSS technical articles are summarized in my Github -- iCSS , which will be updated continuously. Welcome to click a star to subscribe to the collection.

If you have any questions or suggestions, you can communicate more. Original articles are limited in writing and knowledge. If there are any inaccuracies in the article, please let me know.