search
HomeWeb Front-endCSS TutorialLet's talk about how to cleverly use CSS to add color gradients to ordinary black QR codes!

How to use CSS to build gradient color QR code? The following article will introduce to you how to use CSS to add color gradients to ordinary black QR codes. I hope it will be helpful to you!

Let's talk about how to cleverly use CSS to add color gradients to ordinary black QR codes!

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

Very interesting question. We search qrcode on Baidu Google and can find many tools for making QR codes online. Some of them also have the function of making QR codes. The function of gradient QR code. But most of them are implemented in Canvas or other programming languages. [Recommended learning: css video tutorial]

If we already have an ordinary QR code with black text on a white background, and want to turn it into a gradient QR code ? How to do this?

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

Powerful blending modes

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

Here, we need to use mixing mode mix-blend-mode. Blending modes are most commonly found in photoshop and are one of the most powerful features in PS. Currently, CSS already natively supports most blending modes.

The principle is actually very simple. We implement a gradient graphic. This graphic overlaps the QR code with black text on a white background through the mix-blend-mode: lighten in the mixing mode. Once together, the white areas in the QR code will remain unchanged, while the black areas in the QR code will appear as the color in the gradient pattern.

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

<div>
    <img  src="/static/imghwm/default1.png" data-src="qrcode.png" class="lazy" alt="Let's talk about how to cleverly use CSS to add color gradients to ordinary black QR codes!" >
</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 use the pseudo element of the parent element to save a label and use it as a gradient layer. For the actual overlapping effect, I made an animation:

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

There is a hollow in the middle of the QR code

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

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

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

Interestingly, there are two types of patterns in the middle of the QR code: circular and rectangular. For these two types of QR codes, what are the processing methods? Not quite the same yet.

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

For a QR code with a circular pattern in the center, we only need to implement such a gradient and then superimpose it. :

This is relatively simple. Since it is 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%);
}

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

However, if there is a rectangle in the middle, it is not easy to handle. 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 a 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%);
}

Making a QR code dyeing tool

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

Here I simply implemented one:

We quickly create a gradient color QR code by uploading a normal QR code, customizing the gradient color, selecting whether hollowing is required, the type and size of the hollowing out.

A brief demonstration:

A small tool that uses CSS as its core is now complete.

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

https://codepen.io/Chokcoco/pen/XWzPEXW

Finally

To summarize, this article introduces tips for using CSS blending mode to obtain gradient QR codes, and uses mask or clip-path hollow gradient Graphics, some related knowledge points. If you still have questions, I recommend you to read my following articles:

Okay, this article ends here, I hope it will be helpful to you :)

Original address: https://segmentfault.com/a/1190000041543121

Author: chokcoco

(Learning video sharing: Web Front End Introduction)

The above is the detailed content of Let's talk about how to cleverly use CSS to add color gradients to ordinary black QR codes!. For more information, please follow other related articles on the PHP Chinese website!

Statement
This article is reproduced at:segmentfault. If there is any infringement, please contact admin@php.cn delete
A Little Reminder That Pseudo Elements are Children, Kinda.A Little Reminder That Pseudo Elements are Children, Kinda.Apr 19, 2025 am 11:39 AM

Here's a container with some child elements:

Menus with 'Dynamic Hit Areas'Menus with 'Dynamic Hit Areas'Apr 19, 2025 am 11:37 AM

Flyout menus! The second you need to implement a menu that uses a hover event to display more menu items, you're in tricky territory. For one, they should

Improving Video Accessibility with WebVTTImproving Video Accessibility with WebVTTApr 19, 2025 am 11:27 AM

"The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect."- Tim Berners-Lee

Weekly Platform News: CSS ::marker pseudo-element, pre-rendering web components, adding Webmention to your siteWeekly Platform News: CSS ::marker pseudo-element, pre-rendering web components, adding Webmention to your siteApr 19, 2025 am 11:25 AM

In this week's roundup: datepickers are giving keyboard users headaches, a new web component compiler that helps fight FOUC, we finally get our hands on styling list item markers, and four steps to getting webmentions on your site.

Making width and flexible items play nice togetherMaking width and flexible items play nice togetherApr 19, 2025 am 11:23 AM

The short answer: flex-shrink and flex-basis are probably what you’re lookin’ for.

Position Sticky and Table HeadersPosition Sticky and Table HeadersApr 19, 2025 am 11:21 AM

You can't position: sticky; a

Weekly Platform News: HTML Inspection in Search Console, Global Scope of Scripts, Babel env Adds defaults QueryWeekly Platform News: HTML Inspection in Search Console, Global Scope of Scripts, Babel env Adds defaults QueryApr 19, 2025 am 11:18 AM

In this week's look around the world of web platform news, Google Search Console makes it easier to view crawled markup, we learn that custom properties

IndieWeb and WebmentionsIndieWeb and WebmentionsApr 19, 2025 am 11:16 AM

The IndieWeb is a thing! They've got a conference coming up and everything. The New Yorker is even writing about it:

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

mPDF

mPDF

mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),

SecLists

SecLists

SecLists is the ultimate security tester's companion. It is a collection of various types of lists that are frequently used during security assessments, all in one place. SecLists helps make security testing more efficient and productive by conveniently providing all the lists a security tester might need. List types include usernames, passwords, URLs, fuzzing payloads, sensitive data patterns, web shells, and more. The tester can simply pull this repository onto a new test machine and he will have access to every type of list he needs.

WebStorm Mac version

WebStorm Mac version

Useful JavaScript development tools

DVWA

DVWA

Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment