UD5工具箱
Oklch颜色选择器 - 感知均匀色彩空间
使用Oklch色彩空间调节明度、饱和度和色调，预览人类感知均匀的颜色渐变。
前端样式设计工具 - 可视化生成 UI 代码
共 99+ 款工具CSS动画时间轴编辑器 - 可视化关键帧
拖拽轨道上的关键帧，调整动画属性和时间点，直接生成@keyframes代码。
PWA应用图标和徽章生成 - 自适应圆形
上传主图标，自动生成带安全区域内缩的maskable-icon和monochrome通知徽章。
加载旋转器合集 - 数十种纯CSS加载动画
浏览数十种纯CSS实现的加载小动画，点击复制代码直接用于项目。
文本换行策略对比 - overflow/break演示
输入长单词或URL，切换overflow-wrap和word-break属性值，对比溢出自适应效果。
CSS颜色混合演示 - color-mix()实时预览
选择两个颜色和色彩空间，调整混合比例，实时预览并生成CSS color-mix()函数代码。
响应式网格框架选择器 - 比较Bootstrap/Tailwind等
选择不同CSS框架的网格系统配置，对比生成的列数和类名差异，辅助技术选型。
CSS 3D立方体生成器 - 旋转正方体代码
实时调整立方体尺寸、旋转角度和面颜色，生成纯CSS 3D立方体及动画。
流体字体尺寸生成器 - CSS clamp
输入最小视口和最大视口下的字号，生成利用clamp()的流畅缩放字体规则。
文字阴影游乐场 - 多层阴影随意叠加
添加多个text-shadow层，分别调节每层的颜色和偏移，生成复杂文字特效代码。
CSS 3D变换测试器 - 透视/旋转效果
实时调整rotateX/Y/Z、perspective和translateZ，查看3D变换视觉效果。
面包屑导航生成器 - Schema+HTML
可视化添加层级，生成带结构化数据的面包屑导航HTML/CSS代码。
斜角渐变区块生成器 - 倾斜分割背景模块
创建带有倾斜裁剪的渐变背景区块，生成CSS clip-path+渐变代码。
CSS动画录制器 - 拖拽元素生成关键帧代码
在时间轴上拖拽一个元素的位置和样式，自动录制并生成对应的CSS @keyframes动画代码。
颜色变量命名工具 - 语义化名称建议
输入颜色十六进制值，根据色相和明度给出类似`--color-primary-500`的命名建议。
Google Fonts 配对推荐器 - 和谐字体组合
随机推荐视觉和谐的标题和正文字体配对，并显示预览和导入代码。
霓虹发光效果生成器 - 文字/边框发光
为文字或盒子添加多彩的发光/霓虹灯效果，生成对应CSS text-shadow或box-shadow。
表单验证规则测试 - Constraint API
设置不同验证属性和自定义消息，测试HTML5表单验证触发效果。
媒体查询构建器 - 组合条件生成CSS
通过下拉选择宽度、高度、分辨率等，逻辑组合并生成完整的@media规则。
全色盲模拟预览 - 网页URL转色觉障碍视图
输入网站URL（需可Iframe或截图），套用色盲滤镜预览实际视觉效果。
多色标线性渐变生成器 - 高级色标精调
添加多个色标，精确设置百分比位置，实时渲染并生成复杂的linear-gradient代码。
展开阅读更多生成器 - 自适应截断与渐变
生成长文折叠渐变和“展开阅读全文”按钮，支持自定义高度和过渡动画。
CSS选择器构造器 - 基于关系和属性构建
通过勾选元素关系（子孙、兄弟）、属性、伪类等条件，自动生成精确的CSS选择器字符串。
CSS优先级可视化图表 - 特异性对比
输入多个CSS选择器，以图表形式展示各选择器特异性的 (a,b,c) 值对比。
WCAG颜色矩阵测试 - 调色板互对比
输入一组颜色，生成矩阵显示每两色间的对比度和WCAG级别，确保调色板可访问。
按钮样式精选集 - 100种纯CSS按钮
浏览并复制100种不同风格的纯CSS按钮代码，含悬停和点击动效。
CSS Clamp() 生成器 - 最小/首选/最大字体
设定最小、首选、最大三个尺寸及视口范围，生成响应式CSS clamp()表达式。
CSS边框图片生成器 - 九宫格切片直观
上传图片并可视化调整九宫格切片线，生成CSS border-image相关代码。
CSS媒体查询生成器 - 响应式断点代码生成
可视化选择设备类型、屏幕方向和宽度范围，一键生成标准CSS媒体查询代码。
Apple Touch图标生成器 - iOS固定收藏夹图标
上传主图标，自动生成各种尺寸的apple-touch-icon并在HTML头部中引用。
纯CSS提示框生成器 - 鼠标悬停气泡代码
自定义箭头方向、颜色、大小和动画，生成无需JavaScript的纯CSS tooltip组件代码。
首字下沉生成器 - 段落首个大字CSS代码
调整下沉字母的大小、行高和颜色，生成对应的CSS ::first-letter 代码。
线性渐变提取 - 从图片生成双色渐变
上传图片，自动提取最突出的两个颜色，生成水平或垂直渐变CSS。
渐变文高级生成器 - 多层渐隐层叠文字
叠加多层文字分别设置不同渐变色和混合模式，创造丰富文字特效，复制代码。
贝塞尔缓动函数调校工具 - 自定义动画曲线
拖拽两控制点精细微调CSS `cubic-bezier()` 曲线并对比预设函数效果。
CSS混合模式实演 - background-blend-mode
选择多张图片或纯色叠加，切换所有CSS混合模式并实时预览图层效果。
CSS级联层演示 - @layer优先级可视化
交互式调整@layer顺序和选择器，实时观察CSS级联层如何影响样式应用，学习现代特性。
盒模型对比演示 - content-box vs border-box
同时展示两种盒模型下元素的尺寸变化，直观理解宽度计算差异。
媒体特性查询测试器 - 检测prefers-color-scheme等
检测并显示设备当前的所有CSS媒体特性值（如暗色模式、减少动画等）。
网站Favicon颜色提取 - 自动获取主色调
输入网址，尝试拉取该站favicon并提取其主要颜色，用于品牌配色参考。
SVG转CSS背景工具 - 内联背景图代码
上传或粘贴SVG，将其编码为可安全嵌入CSS的background-image: url(data:...)字符串。
吸顶导航栏生成器 - 滚动固定顶部CSS
生成使用position:sticky固定在顶部的导航栏代码，含滚动变色等增强效果。
纯CSS暗黑模式切换 - checkbox黑客实现
利用隐藏的checkbox和CSS兄弟选择器实现无需JS的暗黑/明亮主题切换。
动态通知徽章生成器 - 数字抖动/红点特效
创建带有弹性动画的通知数字徽章或红点，生成对应的HTML/CSS代码。
布局蓝图生成器 - 线框容器配置
选择页眉、侧边栏、主体、页脚的网格布局，生成基本的布局骨架代码。
渐变色带生成器 - 多色标等距渐变CSS
添加任意多个色标，等距分布生成平滑渐变条，复制linear-gradient代码。
CSS Grid可视化调试器 - 叠加网格线
为页面上使用CSS Grid的元素显示网格线和名称，辅助布局开发和调试。
页脚粘底生成器 - 始终在页面底部
生成确保页脚始终在页面底部（即使内容不足）的CSS代码，支持Flexbox/Grid方案。
单选框/复选框美化器 - CSS自定义样式
打造自定义形状和颜色的选择框，生成隐藏原生控件并替换样式的完整代码。
浏览器标签页预览模拟 - 切换主题
设置浏览器标题和图标，模拟在暗色/亮色主题下标签栏的样子。
剪切蒙版文字效果 - 用图片填充文字
输入文字并选择背景图，生成用该图片填充文字的CSS background-clip效果。
浮动标签文本框生成器 - Material风格
生成当用户输入时占位符上浮变为标签的Material风格输入框HTML/CSS。
空状态插画生成器 - 无数据占位符
为应用的空白页（如无订单、无消息）生成带插画和文案的HTML/CSS占位组件。
响应式表格生成器 - 移动端堆叠表格
将HTML表格转换为移动端友好的折叠行显示模式，并生成相应CSS。
链接下划线样式生成器 - 悬停动画
配置不同的下划线出现、消失动画（从中间、左侧等），生成链接美化CSS。
HSL色相滑动调色板 - 单色调色板生成
锁定饱和度和明度，拖动色相滑块生成一系列和谐的单色调色板。
滚动驱动动画生成器 - Scroll-timeline代码
配置基于滚动位置触发的CSS @scroll-timeline动画，复制适配代码。
3D多层阴影生成器 - 拟物化立体感
通过堆叠多层text-shadow或box-shadow创造浮雕或厚重立体文字效果，复制代码。
CSS动画生成器 - Keyframes可视化创建
在线CSS动画代码生成工具，可视化定义关键帧、持续时间、缓动函数等，生成@keyframes动画CSS。
WCAG对比度调节器 - 微调颜色达标
输入背景和文字颜色，若对比度不达标，自动计算需微调至最近达标色的方案。