UD5工具箱
全屏护眼色层 - 自定义滤蓝光/暖色
在网页顶部添加半透明暖色或暗色覆盖层，调节不透明度，降低屏幕刺眼感。
屏幕色温调节 - 全屏滤色叠加层
屏幕色温调节
在全屏滤色叠加层中模拟不同色温，体验护眼与视觉效果。
暖色 1000K
6500K
冷色 10000K
0%
50%
100%
“全屏预览”将滤镜层应用到整个浏览器视口，体验真实屏幕效果。
示例文本预览
这段话将实时反映色温过滤后的效果。调整左侧色温滑块，观察文字和背景的变化，仿佛你的屏幕正在开启护眼模式或夜间模式。
图片示例
视频缩略图
文字区域
知识小贴士：色温越低，光线越偏黄/红，适合夜间使用；色温越高，光线越偏蓝，适合白天提神。
常见问题
色温（单位：开尔文 K）描述光源发出的光的颜色倾向。低色温（< 3000K）偏暖（黄/红），类似黄昏或烛光，能促进褪黑素分泌，适合夜间放松；高色温（> 5000K）偏冷（蓝），类似正午日光，有助于提高警觉性。屏幕长时间使用过高色温可能导致眼疲劳，调节色温可以减轻不适。
我们根据色温值换算成 RGB 颜色，并添加透明度作为滤镜强度。该半透明彩色层覆盖在整个显示区域上方，通过光学混合改变底层内容的视觉色温，与物理滤光片或软件夜间模式的原理相同。
普通预览仅在工具内的示例区域显示滤色效果。点击“全屏预览”后，一个固定定位的叠加层会覆盖整个浏览器视口，让你体验真实全屏阅读或工作的色温效果。按 ESC 或再次点击按钮可退出全屏预览。
适当降低夜间屏幕的蓝光（降低色温）可减少对褪黑素的抑制，改善睡眠质量，并缓解数码眼疲劳。许多操作系统已内置夜间模式，本工具帮助你预览和选择最舒适的色温与强度。
本工具仅用于预览和演示。若需在实际系统中应用，可使用操作系统内置的“夜间模式/护眼模式”，或安装第三方软件如 f.lux、Iris 等，它们能全局调节屏幕色温。
屏幕唤醒锁测试 - 保持常亮及事件监听
请求和释放屏幕唤醒锁，并监听释放事件，适用于视频播放或演示场景。
屏幕唤醒锁测试器 - 保持常亮应用演示
请求Screen Wake Lock防止屏幕关闭，监听释放事件，适用于观看长内容等场景。
屏幕手电筒 - 纯色高亮显示
将屏幕变为纯白色或指定颜色，最高亮度辅助照明或信号。
双色调效果生成 - 高光阴影颜色映射
将图片灰度化后，把阴影区域映射为一种颜色，高光映射为另一种，创造经典双色效果。
色盲友好调色板 - 定性数据配色推荐
展示几组在各类色盲下仍可区分的定性数据配色方案，含Hex码。
CSS 作用域演示 - Shadow DOM 样式隔离效果
创建 Shadow DOM 与普通 DOM 元素，对比样式隔离效果，理解 @layer 和 scoped styles。
在线颜色选择器 - 拾色器与调色板工具
在线颜色选择器，支持从色盘取色、HEX/RGB/HSL颜色值转换，提供调色板功能，方便前端设计取色。
毛玻璃面板生成器 - 模糊/透明度/边框精细调节
拖拽滑块调整背景模糊度、透明度与边框发光，实时预览毛玻璃面板并复制CSS代码。
漏光效果添加 - 图片角落红黄色调渐变
为图片添加类似胶片漏光的红黄色调渐变或光晕效果，营造怀旧氛围。
文本高亮效果生成器 - 荧光笔/下划线动画
制作像荧光笔划过的高亮背景或扫描下划线效果，导出类名。
毛玻璃效果生成器 - CSS Glassmorphism在线
调整透明度、模糊度和边框，实时预览毛玻璃UI卡片，生成兼容CSS backdrop-filter代码。
图片暗角效果工具 - 在线添加Vignette晕影
为照片四周添加纯色或渐变暗角，调整强度与羽化程度，营造复古或突出中心效果。
图层混合模式演示 - 叠加/柔光等在线比较
上传两张图片，实时切换并预览正片叠底、滤色、叠加等多种混合模式效果。
RGB调色滑块模拟 - 像控制LED灯带一样调色
拖拉RGB三个滑块混合颜色，模拟硬件调色体验，显示16进制及色温感觉。
字距与字偶距预览器 - 实时调节CSS letter-spacing
输入文本，滑块调节letter-spacing和word-spacing，实时显示效果并复制CSS。
Oklch调色板生成器 - 感知均匀色彩搭配
在Oklch色彩空间中生成均匀色阶、类比色和互补色方案，确保视觉一致性。
屏幕标尺量角器 - 叠加元素测量长宽角度
可拖拽的虚拟尺子和量角器叠于当前页面，精确测量像素长度与旋转角度。
CSS混合模式实演 - background-blend-mode
选择多张图片或纯色叠加，切换所有CSS混合模式并实时预览图层效果。
屏幕常亮锁工具 - Wake Lock API演示
请求浏览器保持屏幕唤醒，防止自动锁屏，显示当前唤醒锁状态。
CSS 光标样式预览工具 - 所有内置光标效果展示
列出所有标准 CSS 光标值（pointer, grab, zoom-in 等），鼠标悬停实时查看对应光标样式并复制代码。
老电视效果滤镜 - 图片添加扫描线雪花
为图片添加CRT电视的扫描线、像素抖动和雪花噪点效果，营造怀旧氛围。
CSS Clamp() 生成器 - 最小/首选/最大字体
设定最小、首选、最大三个尺寸及视口范围，生成响应式CSS clamp()表达式。
多层阴影生成器增强版 - 可添加多个光源
叠加多重box-shadow，模拟不同光源方向，直观生成逼真阴影CSS代码。
测试覆盖率可视化器 - 上传 lcov 文件查看行覆盖
拖放 lcov.info 文件，以颜色标示每行代码的覆盖状态。
纯CSS暗黑模式切换 - checkbox黑客实现
利用隐藏的checkbox和CSS兄弟选择器实现无需JS的暗黑/明亮主题切换。
点彩画效果生成器 - Voronoi格子点描风格
通过加权Voronoi点算法将图片转换为类似针笔画的黑白点描艺术效果。
预设动画库 - 常用CSS关键帧
浏览并一键复制常见CSS动画（跳动、淡入、滑动等）的@keyframes代码。
屏幕方向锁定测试 - Orientation API
显示当前屏幕方向，并尝试锁定为横屏或竖屏模式，仅部分浏览器支持。
滚动吸附生成器 - 全屏滚动页面模板
配置多屏垂直或水平滑动卡片，生成带CSS Scroll Snap的HTML页面代码。