HTML5中无法用CSS渐变实现真正双色调，但可通过CSS filter组合或SVG feColorMatrix精准实现：前者轻量易用，后者支持灰度映射与通道控制，配合mix-blend-mode还可用于文字填充与图层叠加。

HTML5 中不能直接用 CSS 渐变（linear-gradient 或 radial-gradient）实现真正的双色调（duotone）滤镜——渐变本身是背景色过渡，不是图像色彩映射。但可以结合 CSS filter 与 SVG <feColorMatrix> 实现可靠、可控的双色调效果，且完全兼容 HTML5 环境。

用 CSS filter 模拟双色调（轻量、易上手）

适合快速出效果，不依赖外部资源：

• 核心思路：用 grayscale() + hue-rotate() + saturate() 组合逼近双色调感，例如偏青橙或蓝紫调
• 必须显式声明 transition: filter 0.4s ease 才有平滑过渡，否则无动画
• 避免写 filter: grayscale(1) sepia(1) —— 浏览器不支持跨函数插值，会导致跳变
• 推荐参数组合（起点黑白 → 终点双色调倾向）：
  filter: grayscale(1) contrast(1.2);
filter: grayscale(0.1) hue-rotate(210deg) saturate(1.7) brightness(0.96);
• 加 will-change: filter 提升悬停性能，尤其在 Safari 和旧版 Chrome 中

用 SVG feColorMatrix 实现精准双色调（推荐用于生产）

这是真正意义上的双色调：把图像灰度值映射到两个指定颜色，支持通道级控制：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• 在 HTML 中内联一个 <svg><defs><filter id="duotone">...</filter></defs></svg>
• 使用 <feColorMatrix type="matrix" values="...">，按 RGBA 输出公式配置矩阵
• 典型双色调矩阵（黑→深蓝，白→浅橙）示例：
  

  0.2 0.2 0.2 0 0<br>
    0.2 0.2 0.2 0 0<br>
    0.2 0.2 0.2 0 0<br>
    0   0   0   1 0

  
  再叠加 <feComponentTransfer> 调整亮度分界点，让过渡更柔和
• 应用方式：img { filter: url(#duotone); }，无需 JS，纯 HTML5/CSS/SVG
• 优势：可复用、可动画、不触发重排、支持 print 媒体

配合 background-image 的文字/图层双色调技巧

若想让图片作为文字填充并带双色调感，可用混合模式增强表现力：

立即学习“前端免费学习笔记（深入）”；

• 先用 background-image 设置图，再用 background-clip: text + -webkit-text-fill-color: transparent 把图“填进字里”
• 给文字容器加一层纯色背景（如深蓝），再设 mix-blend-mode: multiply，让图片区域自然呈现双色调倾向
• 或对图片本身加 filter: grayscale(1) contrast(1.3)，再用 mix-blend-mode: overlay 叠在渐变背景上，视觉上强化双色层次
• 注意：mix-blend-mode 需要堆叠上下文（如设置 position: relative 或 isolation: isolate）才能生效

实用工具辅助生成

不用从头算矩阵或调参，这些网站能加速落地：

• duotones.co：上传图片，实时生成双色调效果，下载 PNG 或复制 CSS filter 代码
• ColorSpace：选主色+辅色，一键导出适配双色调的 hue/saturation 参数区间
• Mesh Gradients：提供带纹理的双色调风格渐变，可作图层叠加底纹