漏光效果添加 - 图片角落红黄色调渐变
为图片添加类似胶片漏光的红黄色调渐变或光晕效果,营造怀旧氛围。
色盲友好调色板 - 定性数据配色推荐
展示几组在各类色盲下仍可区分的定性数据配色方案,含Hex码。
毛玻璃面板生成器 - 模糊/透明度/边框精细调节
拖拽滑块调整背景模糊度、透明度与边框发光,实时预览毛玻璃面板并复制CSS代码。
文本高亮效果生成器 - 荧光笔/下划线动画
制作像荧光笔划过的高亮背景或扫描下划线效果,导出类名。
点彩画效果生成器 - Voronoi格子点描风格
通过加权Voronoi点算法将图片转换为类似针笔画的黑白点描艺术效果。
全屏护眼色层 - 自定义滤蓝光/暖色
在网页顶部添加半透明暖色或暗色覆盖层,调节不透明度,降低屏幕刺眼感。
屏幕色温调节 - 全屏滤色叠加层
生成半透明暖色或冷色遮罩层叠加在页面上,模拟护眼模式或色温调节。
Oklch调色板生成器 - 感知均匀色彩搭配
在Oklch色彩空间中生成均匀色阶、类比色和互补色方案,确保视觉一致性。
图层混合模式演示 - 叠加/柔光等在线比较
上传两张图片,实时切换并预览正片叠底、滤色、叠加等多种混合模式效果。
像素绘板 - 网格填色与动画帧
在可缩放网格上选区颜色绘制像素图,支持多帧预览简单动画。
调色板导出为 Tailwind 配置 - 从图片/手动生成色阶
从一个基色或图片提取的颜色,自动生成 50-950 的色阶并导出为 Tailwind CSS 配置。
双色调效果生成 - 高光阴影颜色映射
将图片灰度化后,把阴影区域映射为一种颜色,高光映射为另一种,创造经典双色效果。
Tailwind 调色板可视化浏览器 - 所有色阶一览
可视化浏览 Tailwind CSS 所有内置颜色的 50-950 色阶,点击复制类名或色值。
CSS 作用域演示 - Shadow DOM 样式隔离效果
创建 Shadow DOM 与普通 DOM 元素,对比样式隔离效果,理解 @layer 和 scoped styles。
老电视效果滤镜 - 图片添加扫描线雪花
为图片添加CRT电视的扫描线、像素抖动和雪花噪点效果,营造怀旧氛围。
自定义下拉选择框美化 - 取代原生select
创建带有向下箭头和自定选项风格的自定义选择框HTML+CSS代码。
CSS 滤镜预设画廊 - 一键复制复古/鲜艳等效果
展示多种组合好的 CSS filter 效果(如 1977、古铜色),点击图片应用并复制代码。
CSS Contain 属性演示 - 观察布局/样式/尺寸限制效果
应用 contain 的各种值(layout, paint, size),直观对比开启前后渲染和布局的变化。
渐变网格着色器 - 多点自由色渐变
在画布上放置多个色点,颜色平滑插值形成类似矢量网格渐变的梦幻背景。
正则匹配交互式高亮器 - 实时多颜色分组
编写正则表达式,在文本中用不同颜色高亮整个匹配和每个捕获组。
代码审查清单动态生成 - 按语言和项目定制
选择编程语言和关注领域(安全、性能、可读性),生成定制化的代码审查核对表。
Etch A Sketch电子画板 - 旋钮控制绘图
模拟经典玩具,按方向键或虚拟旋钮绘制线条,按空格键晃动清除。
HTML空格实体可视化 - 查看不可见空白
显示文本中的非换行空格、全角空格等隐藏字符映射。
视差背景生成器 - 纯 CSS 多层效果
上传图片并设置层位置和滚动速度,生成纯 CSS 的多层视差滚动背景代码。
文本换行优化器 - 标题漂亮折行预览
输入标题文本,尝试不同容器宽度,手动插入<br>或使用text-wrap:balance显示效果。
CSS 系统颜色演示 - Canvas/Window/Highlight 等
展示 CSS 系统颜色关键字(如 CanvasText, LinkText)在明暗模式下的实际渲染值。
在线颜色选择器 - 拾色器与调色板工具
在线颜色选择器,支持从色盘取色、HEX/RGB/HSL颜色值转换,提供调色板功能,方便前端设计取色。
配色环和谐规则可视化 - 实时补色与分裂互补
拖拽基色指针,自动计算互补、近似、三等分等七种和谐配色方案,复制十六进制值。
多层阴影层设计器 - 拟物化/纸雕效果
添加多个阴影层,独立调节每层的偏移、模糊、扩展和颜色,创造复杂立体效果。
毛玻璃效果生成器 - CSS Glassmorphism在线
调整透明度、模糊度和边框,实时预览毛玻璃UI卡片,生成兼容CSS backdrop-filter代码。
UD5工具箱