漏光效果添加 - 图片角落红黄色调渐变
为图片添加类似胶片漏光的红黄色调渐变或光晕效果,营造怀旧氛围。
UD5工具箱
拖拽图片到此处,或点击上传
支持 JPG / PNG / WebP / GIF · 也可粘贴图片
双色调(Duotone)是一种图像处理技术,将图片的暗部(阴影)映射为一种颜色,亮部(高光)映射为另一种颜色,中间亮度区域则在两种颜色之间平滑过渡。这种效果源于传统印刷工艺,如今广泛应用于海报设计、品牌视觉、UI设计和社交媒体图像中,能创造出极具视觉冲击力和艺术感的画面。
双色调效果的应用非常广泛:品牌设计中用于统一视觉风格;海报和广告中增强视觉吸引力;社交媒体配图中让图片更具艺术感;UI/UX设计中用于Hero区域或背景图;音乐专辑封面;PPT演示文稿中的图片美化等。Spotify、Apple等品牌都曾广泛使用双色调风格。
选择配色时有几个实用技巧:1. 互补色搭配(如蓝+橙、紫+黄)创造强烈对比;2. 邻近色搭配(如深蓝+天蓝、深紫+粉紫)营造和谐氛围;3. 明暗对比确保阴影色足够深、高光色足够亮,这样双色调层次才分明;4. 参考流行配色,如本工具提供的预设方案。建议阴影色选择深色系(低亮度),高光色选择明亮色系(高亮度),以获得最佳效果。
本工具支持所有主流图片格式:JPEG/JPG(最常用)、PNG(支持透明通道)、WebP(高效压缩格式)、GIF(仅处理第一帧)、BMP等。上传的图片会在浏览器本地处理,不会上传到任何服务器,确保您的隐私安全。对于透明PNG图片,透明区域在处理后会保持透明。
处理后的图片保持原始分辨率不变(长边超过1920px时会等比缩放至1920px以保证性能)。下载为PNG格式时采用无损压缩,画质极高。双色调处理将丰富的色彩信息映射为两种色调,虽然色彩数量减少,但图像的亮度层次和细节纹理得以保留,呈现出独特的艺术质感。
效果强度:控制双色调效果的应用程度。100%为完全双色调,0%为原始图片。降低强度可以保留部分原始色彩,创造出更微妙复古的效果。亮度平衡:调整亮度映射的曲线。负值使更多区域映射到高光色(画面变亮),正值使更多区域映射到阴影色(画面变暗),0为中性均匀映射。这个参数可以帮助您精细控制画面的明暗分布。
灰度图(Grayscale)将彩色图片转换为黑白色阶,只保留亮度信息,范围从纯黑到纯白。双色调则在此基础上更进一步——用两种任意颜色替换黑白两端。例如,阴影色可以是深蓝色而非纯黑,高光色可以是桃红色而非纯白。这使得双色调图片比灰度图更具情感表达力和视觉吸引力,能够更好地融入品牌色彩体系。
本工具完全免费,处理后的图片可以用于商业项目。但请注意,您上传的原始图片需确保拥有合法的使用权。工具在浏览器本地运行,不会将图片上传至服务器,处理过程完全在您的设备上完成,保障数据安全与隐私。下载的图片可直接用于网站、社交媒体、印刷品、商业提案等场景。
为图片添加类似胶片漏光的红黄色调渐变或光晕效果,营造怀旧氛围。
通过堆叠多层text-shadow或box-shadow创造浮雕或厚重立体文字效果,复制代码。
通过叠加多个阴影创建柔和且真实的UI投影,导出CSS。
叠加多重box-shadow,模拟不同光源方向,直观生成逼真阴影CSS代码。
创建 Shadow DOM 与普通 DOM 元素,对比样式隔离效果,理解 @layer 和 scoped styles。
为照片四周添加纯色或渐变暗角,调整强度与羽化程度,营造复古或突出中心效果。
添加多个阴影层,独立调节每层的偏移、模糊、扩展和颜色,创造复杂立体效果。
调节背景色、亮阴影与暗阴影距离,生成新拟态风格按钮/卡片样式并导出代码。
上传两张图片,实时切换并预览正片叠底、滤色、叠加等多种混合模式效果。
通过加权Voronoi点算法将图片转换为类似针笔画的黑白点描艺术效果。
生成半透明暖色或冷色遮罩层叠加在页面上,模拟护眼模式或色温调节。
在网页顶部添加半透明暖色或暗色覆盖层,调节不透明度,降低屏幕刺眼感。
选择多张图片或纯色叠加,切换所有CSS混合模式并实时预览图层效果。
经典的Canny计算机视觉边缘检测算法的前端演示,可调节低高阈值。
调整透明度、模糊度和边框,实时预览毛玻璃UI卡片,生成兼容CSS backdrop-filter代码。
调节光源角度、颜色和距离,生成凹凸柔和的新拟态UI元素CSS盒阴影代码,潮流设计工具。
列出所有标准 CSS 光标值(pointer, grab, zoom-in 等),鼠标悬停实时查看对应光标样式并复制代码。
在画布上放置多个色点,颜色平滑插值形成类似矢量网格渐变的梦幻背景。
在Oklch色彩空间中生成均匀色阶、类比色和互补色方案,确保视觉一致性。
在页面上叠加可拖拽的半透明网格线,辅助网格布局对齐。
在可缩放网格上选区颜色绘制像素图,支持多帧预览简单动画。
将照片转为安迪·沃霍尔风格的丝网印刷波普四宫格,可替换每个格子的色彩。
浏览并一键复制常见CSS动画(跳动、淡入、滑动等)的@keyframes代码。
展示几组在各类色盲下仍可区分的定性数据配色方案,含Hex码。
拖拽滑块调整背景模糊度、透明度与边框发光,实时预览毛玻璃面板并复制CSS代码。
拖拽两控制点精细微调CSS `cubic-bezier()` 曲线并对比预设函数效果。
为页面上使用CSS Grid的元素显示网格线和名称,辅助布局开发和调试。
为图片添加CRT电视的扫描线、像素抖动和雪花噪点效果,营造怀旧氛围。
上传图标图片,模拟其在iPhone主屏幕上的显示效果与圆角遮罩。
加载Lottie动画JSON文件,播放并控制速度、方向,预览动效效果。