漏光效果添加 - 图片角落红黄色调渐变
为图片添加类似胶片漏光的红黄色调渐变或光晕效果,营造怀旧氛围。
图片暗角效果生成器 - 强度/半径/羽化
为图片添加可调节的暗角效果,控制大小、强度和羽化,引导视线至中心。
点彩画效果生成器 - Voronoi格子点描风格
通过加权Voronoi点算法将图片转换为类似针笔画的黑白点描艺术效果。
双色调效果生成 - 高光阴影颜色映射
将图片灰度化后,把阴影区域映射为一种颜色,高光映射为另一种,创造经典双色效果。
图层混合模式演示 - 叠加/柔光等在线比较
上传两张图片,实时切换并预览正片叠底、滤色、叠加等多种混合模式效果。
多层阴影生成器增强版 - 可添加多个光源
叠加多重box-shadow,模拟不同光源方向,直观生成逼真阴影CSS代码。
全屏护眼色层 - 自定义滤蓝光/暖色
在网页顶部添加半透明暖色或暗色覆盖层,调节不透明度,降低屏幕刺眼感。
渐变网格着色器 - 多点自由色渐变
在画布上放置多个色点,颜色平滑插值形成类似矢量网格渐变的梦幻背景。
视差背景生成器 - 纯 CSS 多层效果
上传图片并设置层位置和滚动速度,生成纯 CSS 的多层视差滚动背景代码。
CSS 3D 立体文字生成器 - 多层阴影叠加
通过多层 text-shadow 叠加生成具有厚度和光照感的 3D 文字效果。
多层阴影层设计器 - 拟物化/纸雕效果
添加多个阴影层,独立调节每层的偏移、模糊、扩展和颜色,创造复杂立体效果。
无障碍多选下拉框生成器 - 复选框风格
创建带有复选框或标签的多选下拉列表,支持删除已选项,键盘可全控。
老电视效果滤镜 - 图片添加扫描线雪花
为图片添加CRT电视的扫描线、像素抖动和雪花噪点效果,营造怀旧氛围。
测试覆盖率可视化器 - 上传 lcov 文件查看行覆盖
拖放 lcov.info 文件,以颜色标示每行代码的覆盖状态。
正则匹配交互式高亮器 - 实时多颜色分组
编写正则表达式,在文本中用不同颜色高亮整个匹配和每个捕获组。
3D多层阴影生成器 - 拟物化立体感
通过堆叠多层text-shadow或box-shadow创造浮雕或厚重立体文字效果,复制代码。
屏幕色温调节 - 全屏滤色叠加层
生成半透明暖色或冷色遮罩层叠加在页面上,模拟护眼模式或色温调节。
CSS 光标样式预览工具 - 所有内置光标效果展示
列出所有标准 CSS 光标值(pointer, grab, zoom-in 等),鼠标悬停实时查看对应光标样式并复制代码。
新拟态UI元素生成器 - 柔和阴影与凸起凹陷
调节背景色、亮阴影与暗阴影距离,生成新拟态风格按钮/卡片样式并导出代码。
色盲友好调色板 - 定性数据配色推荐
展示几组在各类色盲下仍可区分的定性数据配色方案,含Hex码。
Lottie动画预览器 - 拖放JSON查看动效
加载Lottie动画JSON文件,播放并控制速度、方向,预览动效效果。
像素绘板 - 网格填色与动画帧
在可缩放网格上选区颜色绘制像素图,支持多帧预览简单动画。
贝塞尔缓动函数调校工具 - 自定义动画曲线
拖拽两控制点精细微调CSS `cubic-bezier()` 曲线并对比预设函数效果。
Three.js 场景在线编辑器 - 拖拽添加模型和灯光
在浏览器中构建 3D 场景,添加基本几何体、光源,导出场景代码。
毛玻璃效果生成器 - CSS Glassmorphism在线
调整透明度、模糊度和边框,实时预览毛玻璃UI卡片,生成兼容CSS backdrop-filter代码。
Canvas 辅助线工具 - 为画布添加标尺和参考线
在 HTML5 Canvas 上叠加可拖拽的辅助线和标尺,帮助精确绘制和布局。
SVG 动画合成器 - 拖拽元素创建 SMIL 动画
在 SVG 画布上添加形状,设定动画属性(位置、颜色等),生成可内嵌的动画 SVG。
新拟态设计生成器 - CSS Neumorphism样式代码
调节光源角度、颜色和距离,生成凹凸柔和的新拟态UI元素CSS盒阴影代码,潮流设计工具。
文本高亮效果生成器 - 荧光笔/下划线动画
制作像荧光笔划过的高亮背景或扫描下划线效果,导出类名。
CSS 滤镜预设画廊 - 一键复制复古/鲜艳等效果
展示多种组合好的 CSS filter 效果(如 1977、古铜色),点击图片应用并复制代码。
UD5工具箱