UD5工具箱
图片暗角效果工具 - 在线添加Vignette晕影
为照片四周添加纯色或渐变暗角，调整强度与羽化程度，营造复古或突出中心效果。
📷 图片暗角效果生成器
在线为照片添加暗角效果 · 强度/半径/羽化自由调节 · 实时预览 · 免费下载
点击上传图片 或 拖拽图片到此处
支持 JPG / PNG / WebP
支持 JPG / PNG / WebP
参数调节
常见问题与知识点
暗角效果（Vignette）是指照片边缘逐渐变暗或变亮的视觉效果。这个术语源自法语，最早出现在摄影和绘画中。在摄影中，暗角通常由镜头的光学特性产生——镜头边缘的进光量少于中心，导致画面四周比中心暗。在现代图像处理中，暗角效果被广泛用作一种创意调色手法，可以引导观众视线聚焦于画面主体，营造氛围感，或为照片增添复古胶片质感。
- 强度（Strength）：控制暗角的最大不透明度。0%表示无暗角，100%表示完全黑色（或所选颜色）。建议从40%-70%开始调整。
- 半径（Radius）：控制暗角从何处开始向边缘扩散。值越小，暗角覆盖范围越大（从更靠近中心的位置开始）；值越大，暗角越贴近边缘，中心明亮区域更大。
- 羽化（Feather）：控制暗角过渡的柔和程度。值越小，过渡越锐利、边界越明显；值越大，过渡越平滑自然。适中的羽化值能让暗角看起来更自然。
暗角效果适用于多种场景：人像摄影中突出人物主体、风景摄影中增强氛围感、产品摄影中聚焦商品、婚礼照片中增添浪漫温馨感、社交媒体配图中提升视觉层次。轻微的暗角几乎适用于所有类型的照片，能让画面更具"电影感"。白色暗角（高调暗角）则常用于高调照片、梦幻风格或复古效果。
工具支持常见的图片格式：JPEG（.jpg）、PNG（.png）、WebP（.webp）和BMP（.bmp）。上传的图片会在浏览器本地处理，不会上传到任何服务器，确保您的图片隐私安全。处理完成后可下载为PNG格式（保留透明通道）。
在预览区域按住鼠标左键（或移动端长按屏幕），即可临时查看原图；松开后恢复显示暗角效果。这种即时对比方式让您能直观地感受暗角带来的变化。您也可以将强度调至0%来查看原始效果。
漏光效果添加 - 图片角落红黄色调渐变
为图片添加类似胶片漏光的红黄色调渐变或光晕效果，营造怀旧氛围。
双色调效果生成 - 高光阴影颜色映射
将图片灰度化后，把阴影区域映射为一种颜色，高光映射为另一种，创造经典双色效果。
点彩画效果生成器 - Voronoi格子点描风格
通过加权Voronoi点算法将图片转换为类似针笔画的黑白点描艺术效果。
多层阴影生成器增强版 - 可添加多个光源
叠加多重box-shadow，模拟不同光源方向，直观生成逼真阴影CSS代码。
贝塞尔缓动函数调校工具 - 自定义动画曲线
拖拽两控制点精细微调CSS `cubic-bezier()` 曲线并对比预设函数效果。
色盲友好调色板 - 定性数据配色推荐
展示几组在各类色盲下仍可区分的定性数据配色方案，含Hex码。
正则匹配交互式高亮器 - 实时多颜色分组
编写正则表达式，在文本中用不同颜色高亮整个匹配和每个捕获组。
多层阴影层设计器 - 拟物化/纸雕效果
添加多个阴影层，独立调节每层的偏移、模糊、扩展和颜色，创造复杂立体效果。
全屏护眼色层 - 自定义滤蓝光/暖色
在网页顶部添加半透明暖色或暗色覆盖层，调节不透明度，降低屏幕刺眼感。
无障碍多选下拉框生成器 - 复选框风格
创建带有复选框或标签的多选下拉列表，支持删除已选项，键盘可全控。
新拟态UI元素生成器 - 柔和阴影与凸起凹陷
调节背景色、亮阴影与暗阴影距离，生成新拟态风格按钮/卡片样式并导出代码。
找不同/找隐藏物品 - 复杂场景中点击目标
在布满干扰物的图片中寻找并点击目标物品，记录用时。
Flexbox属性速查 - 可视对照表
可视化Flexbox容器和子项的所有属性及选项，鼠标悬停预览效果。
3D多层阴影生成器 - 拟物化立体感
通过堆叠多层text-shadow或box-shadow创造浮雕或厚重立体文字效果，复制代码。
视差背景生成器 - 纯 CSS 多层效果
上传图片并设置层位置和滚动速度，生成纯 CSS 的多层视差滚动背景代码。
图层混合模式演示 - 叠加/柔光等在线比较
上传两张图片，实时切换并预览正片叠底、滤色、叠加等多种混合模式效果。
Canny边缘检测器 - 双阈值算法提取轮廓
经典的Canny计算机视觉边缘检测算法的前端演示，可调节低高阈值。
JSON 差异对比器 - 高亮增删改节点
输入新旧JSON，并排展示增删改的行级差异，辅助接口变动追踪。
CSS Contain 属性演示 - 观察布局/样式/尺寸限制效果
应用 contain 的各种值（layout, paint, size），直观对比开启前后渲染和布局的变化。
内存分页替换模拟 - FIFO/LRU/OPT动画
设定物理页框数，输入页引用串，动画展示不同页面置换算法的缺页率。
调色板导出为 Tailwind 配置 - 从图片/手动生成色阶
从一个基色或图片提取的颜色，自动生成 50-950 的色阶并导出为 Tailwind CSS 配置。
文本高亮效果生成器 - 荧光笔/下划线动画
制作像荧光笔划过的高亮背景或扫描下划线效果，导出类名。
波普艺术效果生成器 - 沃霍尔风格四宫格
将照片转为安迪·沃霍尔风格的丝网印刷波普四宫格，可替换每个格子的色彩。
测试覆盖率可视化器 - 上传 lcov 文件查看行覆盖
拖放 lcov.info 文件，以颜色标示每行代码的覆盖状态。
Catmull-Clark 细分曲面演示 - 控制网格迭代
载入简单控制网格，执行 Catmull-Clark 细分一次，观察光滑效果。
CSS 伪类效果测试场 - 实时查看 :is() :where() :has()
编写带有伪类的选择器，实时高亮匹配的HTML元素，探索现代CSS选择器的能力。
Webpack 打包分析器 - stats.json 可视化
上传 webpack 的 stats.json，生成交互式树状图、模块大小排名，辅助优化构建体积。
Lottie动画预览器 - 拖放JSON查看动效
加载Lottie动画JSON文件，播放并控制速度、方向，预览动效效果。
CSS Grid 调试覆盖层 - 显示网格线与区域
在页面上叠加可拖拽的半透明网格线，辅助网格布局对齐。