如何通过CSS巧妙制作渐变效果彩色二维码？

本文共计1534个文字，预计阅读时间需要7分钟。

今日，群里有个很有意思的问题，问我如何实现一个彩色、带渐变的二维码，就像这样：+很有意思的问题，我们在百度谷歌搜索qrcode，能找到非常多在线制作二维码的工具。

今日，群里有个很有意思的问题，问我如何实现一个彩色的，带渐变的二维码，像是这样：

很有意思的问题，我们在百度谷歌，搜索 qrcode，能搜到非常多在线制作二维码的工具，它们其中一些也会带有制作渐变二维码的功能。但是它们大部分都是 Canvas 或者其它编程语言实现的。

如果我们现在已经有了一张白底黑字的普通二维码，想把它变成一个渐变色的二维码？该如何做呢？

本文就将介绍，使用 CSS，快速将一个普通黑色二维码，变成任意我们想要的彩色渐变二维码。

强大的混合模式

拥有一张原图，想改变其颜色。在 CSS 中，我们很快可以想到 滤镜 filter、或者是 混合模式 mix-blend-mode。

这里，我们就需要用到 混合模式 mix-blend-mode。混合模式最常见于 photoshop 中，是 PS 中十分强大的功能之一。目前 CSS 已经原生支持了大部分的混合模式。

原理其实非常简单，我们实现一张渐变图形，这张图形通过混合模式中的 mix-blend-mode: lighten 与白底黑字的二维码重叠在一起后，二维码中的白色区域将保持不变，而二维码中的黑色区域将展现为渐变图案中的颜色。