UD5工具箱
焦点指示器样式定制器 - 生成 :focus-visible 样式
实时调整焦点轮廓的颜色、粗细和偏移，生成美观且高对比度的焦点样式代码。
CSS 样式与布局
共 29+ 款工具CSS 伪类效果测试场 - 实时查看 :is() :where() :has()
编写带有伪类的选择器，实时高亮匹配的HTML元素，探索现代CSS选择器的能力。
Flexbox 高级演练场 - 所有属性可视化控制
通过滑块和开关调整 Flex 容器和子项的所有 CSS 属性，实时观察布局变化，理解弹性盒子。
CSS 滤镜组合效果演示 - 实时对比
对图片应用多种滤镜组合，对比原图与效果，学习 filter 属性的视觉影响。
多层阴影层设计器 - 拟物化/纸雕效果
添加多个阴影层，独立调节每层的偏移、模糊、扩展和颜色，创造复杂立体效果。
CSS 3D 变换沙盒 - 平移旋转缩放与透视
独立控制 perspective、rotateX/Y/Z、translateZ 等，实时查看3D卡片或立方体效果。
可变字体实验场 - 调节字重/宽度/倾斜轴
加载一个可变字体文件，通过滑块动态调整注册轴（wght, wdth, slnt 等），实时预览。
单选复选美化生成器 - 纯CSS自定义样式
选择模板，调节颜色与动画，生成美观的单选/复选框样式代码。
互动渐变探索器 - 抓取渐变色标移动
在色带任意位置点击添加色标并拖拽，感受渐变设计。
现代平滑阴影生成器 - 多层阴影叠加
通过叠加多个阴影创建柔和且真实的UI投影，导出CSS。
流式间距生成器 - 基于视口的动态padding/margin
类似字体工具，针对内外边距产生随视口平滑缩放的CSS值，完善流式布局体系。
图片精灵图辅助定位器 - 单击获取CSS坐标
上传精灵图，自动切片检测或手动框选获取背景定位数值，生成CSS Sprite代码。
CSS 作用域演示 - Shadow DOM 样式隔离效果
创建 Shadow DOM 与普通 DOM 元素，对比样式隔离效果，理解 @layer 和 scoped styles。
CSS motion-path 路径动画演示 - 元素沿路径运动
绘制 SVG 路径，让元素沿着路径运动，调整速度和缓动，生成动画代码。
文本高亮效果生成器 - 荧光笔/下划线动画
制作像荧光笔划过的高亮背景或扫描下划线效果，导出类名。
列表标记自定义器 - 使用Emoji/SVG做符号
选择或上传自定义列表符号，生成对应的CSS ::marker或背景样式。
CSS进度条生成器 - 自定义颜色/圆角/动画
调节宽度、颜色、条纹动画等参数，实时预览并生成进度条HTML/CSS。
高级CSS图案背景库 - 精选条纹/圆点/棋盘
浏览数十种纯CSS实现的几何背景图案，一键复制代码。
多层阴影生成器增强版 - 可添加多个光源
叠加多重box-shadow，模拟不同光源方向，直观生成逼真阴影CSS代码。
渐变噪点纹理生成器 - 有机质感CSS背景
组合多色渐变与SVG噪点叠加，生成独特且轻量的CSS背景纹理，适配现代UI。
HTML内联样式提取器 - 批量整理为独立CSS
提取HTML中内联style属性或嵌入式style标签，转变为独立CSS规则，辅助样式重构。
CSS 容器查询实验室 - 基于卡片宽度的响应式布局
拖拽改变容器宽度，观察使用container-type和@container规则的元素如何自适应样式。
字母头像占位符生成器 - 基于姓名生成纯 CSS 头像
输入名字，生成带有首字母的彩色圆形头像，适合无头像用户使用。
CSS Subgrid 布局构建器 - 对齐嵌套网格轨道
拖拽设计包含 Subgrid 的嵌套网格，直观展示子网格如何继承父网格轨道并进行独立调整，生成代码。
CSS 级联层 (@layer) 优先级可视化 - 层叠顺序对比
将CSS规则分配到不同@layer，并可视化展示最终生效声明及其来源层级，深入理解级联。
CSS 嵌套语法测试器 - 原生嵌套规则实时转译
编写即将到来的CSS原生嵌套语法，实时查看等效的传统CSS输出与匹配效果。
范围滑块预设集 - 复制各种风格range CSS
展示多种风格的<input type=range>样式，一键复制定制代码。
渐变文字CSS生成器 - 在线调节渐变色与裁剪
选取渐变色，实时预览渐变文字效果并生成background-clip:text代码。
渐变断点可视化编辑器 - 拖拽色标调整渐变
在渐变条上拖拽添加和移动色标，调整颜色和位置，实时输出 CSS linear-gradient 代码。