UD5工具箱
CSS 背景图案生成器 - 条纹/点/网格重复背景
通过可视化参数生成纯 CSS 的背景图案（斜条纹、圆点、方格等），实时调整颜色和尺寸。
标签： CSS 工具 - 样式生成与处理
共 99+ 款工具CSS 缓动函数可视化预览 - 动画 timing-function 演示
展示所有内置缓动函数（ease, linear 等）及自定义 cubic-bezier 的运动曲线和动画效果。
scroll-padding/margin 演示 - 锚点定位偏移控制
设置粘性头部高度后，演示 scroll-padding-top 如何防止锚点定位被遮挡。
文本对齐方式对比器 - 两端对齐/左齐/右齐效果
输入段落并切换 text-align 值，实时查看不同对齐方式的排版效果及连字符表现。
自定义列表标记 CSS 生成器 - 使用 ::marker 伪元素
通过颜色、字体和内容自定义有序或无序列表的项目符号样式，生成 ::marker CSS。
有机形状/气泡生成器 - CSS border-radius 不规则圆形
拖拽控制点创建不规则、有机感的圆角形状，生成对应的 border-radius 代码。
CSS 滤镜预设画廊 - 一键复制复古/鲜艳等效果
展示多种组合好的 CSS filter 效果（如 1977、古铜色），点击图片应用并复制代码。
CSS 代码在线压缩工具 - 移除空白与注释
粘贴 CSS 代码，一键移除所有冗余空格、注释和分号，快速压缩体积。
渐变边框生成器 - 使用 border-image 或 background-clip
生成带有渐变颜色的边框效果，支持 border-image 和 background-clip 两种实现方式。
CSS Contain 属性演示 - 观察布局/样式/尺寸限制效果
应用 contain 的各种值（layout, paint, size），直观对比开启前后渲染和布局的变化。
OpenType 特性预览器 - 连字/小型大写/数字风格
选择支持 OpenType 特性的字体，切换连字、小型大写、数字样式等，查看效果并生成 CSS。
流体排版 CSS 生成器 - clamp() 函数计算
输入最小/最大字体大小和视口范围，生成精确的 clamp() 值及回退方案。
CSS 系统颜色演示 - Canvas/Window/Highlight 等
展示 CSS 系统颜色关键字（如 CanvasText, LinkText）在明暗模式下的实际渲染值。
CSS渐变生成器 - 在线渐变色代码可视化生成
在线CSS渐变生成器，可视化调整线性渐变、径向渐变角度与色标，自动生成兼容CSS代码。
多层阴影层设计器 - 拟物化/纸雕效果
添加多个阴影层，独立调节每层的偏移、模糊、扩展和颜色，创造复杂立体效果。
视差背景生成器 - 纯 CSS 多层效果
上传图片并设置层位置和滚动速度，生成纯 CSS 的多层视差滚动背景代码。
CSS @scope 规则演示 - 作用域样式隔离
演示新的 CSS @scope 规则如何限定样式作用范围，对比传统 BEM 和 CSS Modules。
CSS motion-path 路径动画演示 - 元素沿路径运动
绘制 SVG 路径，让元素沿着路径运动，调整速度和缓动，生成动画代码。
CSS Transform 在线生成器 - 平移/旋转/缩放/倾斜 可视化
拖拽或输入数值组合多个 CSS transform 函数，实时观察元素变换效果并获取代码。
CSS 混合模式在线演示 - mix-blend-mode 与 background-blend-mode 预览
选择不同的混合模式并调整背景与前景，实时查看混合效果，支持所有标准混合模式。
CSS动画时间轴编辑器 - 可视化关键帧
拖拽轨道上的关键帧，调整动画属性和时间点，直接生成@keyframes代码。
多色标线性渐变生成器 - 高级色标精调
添加多个色标，精确设置百分比位置，实时渲染并生成复杂的linear-gradient代码。
CSS媒体查询生成器 - 响应式断点代码生成
可视化选择设备类型、屏幕方向和宽度范围，一键生成标准CSS媒体查询代码。
内联样式提取合并工具 - 汇总 style 属性为类
提取 HTML 中所有内联 style，智能合并相同样式生成 class，并替换为类名以减小体积。
彩虹文字生成器 - 渐变流动动画文字
生成背景渐变动画并使用 background-clip 填充文字的彩虹效果代码。
CSS 计数器样式在线预览 - 自定义有序列表标记
选择不同的 list-style-type（disc, decimal, lower-roman 等）并实时查看列表样式渲染效果。
CSS 滤镜组合效果演示 - 实时对比
对图片应用多种滤镜组合，对比原图与效果，学习 filter 属性的视觉影响。
加载旋转器合集 - 数十种纯CSS加载动画
浏览数十种纯CSS实现的加载小动画，点击复制代码直接用于项目。
CSS加载动画生成器 - 各种Spinner/Loader代码
选择二十多种纯CSS Loading动画，实时预览并复制HTML/CSS代码，用于页面预加载。
系统强调色预览 - 在不同控件上的表现
动态调整 accent-color 并实时查看对复选框、单选按钮、进度条和滑块的影响。
SVG路径转CSS裁剪路径 - 形状转换
将SVG路径数据转换为CSS clip-path: path() 语法，用于裁剪HTML元素。
加载动画合集 - 纯 CSS 旋转器/骨架屏
展示数十种纯 CSS 的加载动画和骨架屏效果，点击复制代码直接使用。
CSS进度条生成器 - 自定义颜色/圆角/动画
调节宽度、颜色、条纹动画等参数，实时预览并生成进度条HTML/CSS。
CSS 伪类效果测试场 - 实时查看 :is() :where() :has()
编写带有伪类的选择器，实时高亮匹配的HTML元素，探索现代CSS选择器的能力。
颜色变量命名工具 - 语义化名称建议
输入颜色十六进制值，根据色相和明度给出类似`--color-primary-500`的命名建议。
按钮样式精选集 - 100种纯CSS按钮
浏览并复制100种不同风格的纯CSS按钮代码，含悬停和点击动效。
SVG转CSS背景工具 - 内联背景图代码
上传或粘贴SVG，将其编码为可安全嵌入CSS的background-image: url(data:...)字符串。
打印友好按钮生成器 - 一键隐藏打印无关内容
生成一个按钮脚本，点击时自动隐藏导航等元素并应用打印样式，优化页面打印。
CSS动画生成器 - Keyframes可视化创建
在线CSS动画代码生成工具，可视化定义关键帧、持续时间、缓动函数等，生成@keyframes动画CSS。
页脚粘底生成器 - 始终在页面底部
生成确保页脚始终在页面底部（即使内容不足）的CSS代码，支持Flexbox/Grid方案。
纯CSS提示框生成器 - 鼠标悬停气泡代码
自定义箭头方向、颜色、大小和动画，生成无需JavaScript的纯CSS tooltip组件代码。
渐变文高级生成器 - 多层渐隐层叠文字
叠加多层文字分别设置不同渐变色和混合模式，创造丰富文字特效，复制代码。
背景滤镜生成器 - CSS backdrop-filter在线
单独对元素背景区域应用模糊、亮度、灰度等滤镜，生成兼容的CSS backdrop-filter属性。
图片精灵图辅助定位器 - 单击获取CSS坐标
上传精灵图，自动切片检测或手动框选获取背景定位数值，生成CSS Sprite代码。
贝塞尔缓动函数调校工具 - 自定义动画曲线
拖拽两控制点精细微调CSS `cubic-bezier()` 曲线并对比预设函数效果。
CSS颜色混合演示 - color-mix()实时预览
选择两个颜色和色彩空间，调整混合比例，实时预览并生成CSS color-mix()函数代码。
文本换行策略对比 - overflow/break演示
输入长单词或URL，切换overflow-wrap和word-break属性值，对比溢出自适应效果。
首字下沉生成器 - 段落首个大字CSS代码
调整下沉字母的大小、行高和颜色，生成对应的CSS ::first-letter 代码。
文字阴影游乐场 - 多层阴影随意叠加
添加多个text-shadow层，分别调节每层的颜色和偏移，生成复杂文字特效代码。
吸顶导航栏生成器 - 滚动固定顶部CSS
生成使用position:sticky固定在顶部的导航栏代码，含滚动变色等增强效果。
边框圆角生成器 - CSS Border-Radius在线生成
在线可视化调整元素圆角半径，支持统一或分别设置四个角，实时预览圆角效果并生成CSS代码。
文字阴影生成器 - CSS Text-Shadow在线生成
在线CSS文字阴影效果生成器，通过滑块调整阴影属性，即时预览文字多层阴影效果，复制CSS代码。
PostCSS 插件演练场 - 在线测试 CSS 转换
输入 CSS 和自定义 PostCSS 插件代码，实时查看处理后的输出，用于插件开发。
新拟态UI元素生成器 - 柔和阴影与凸起凹陷
调节背景色、亮阴影与暗阴影距离，生成新拟态风格按钮/卡片样式并导出代码。
剪切蒙版文字效果 - 用图片填充文字
输入文字并选择背景图，生成用该图片填充文字的CSS background-clip效果。
纯CSS暗黑模式切换 - checkbox黑客实现
利用隐藏的checkbox和CSS兄弟选择器实现无需JS的暗黑/明亮主题切换。
CSS选择器构造器 - 基于关系和属性构建
通过勾选元素关系（子孙、兄弟）、属性、伪类等条件，自动生成精确的CSS选择器字符串。
容器查询互动沙盒 - @container响应式组件
在卡片内调整容器尺寸，直观预览基于容器宽度的样式变化，学习和验证CSS容器查询。
盒模型对比演示 - content-box vs border-box
同时展示两种盒模型下元素的尺寸变化，直观理解宽度计算差异。
暗黑模式切换演示 - 三种实现对比
对比用CSS媒体查询、类名切换和localStorage持久化三种暗黑模式实现方式。