UD5工具箱
纯CSS提示框生成器 - 鼠标悬停气泡代码
自定义箭头方向、颜色、大小和动画，生成无需JavaScript的纯CSS tooltip组件代码。
前端样式设计工具 - 可视化生成 UI 代码
共 99+ 款工具CSS渐变生成器 - 在线渐变色代码可视化生成
在线CSS渐变生成器，可视化调整线性渐变、径向渐变角度与色标，自动生成兼容CSS代码。
滚动吸附生成器 - 全屏滚动页面模板
配置多屏垂直或水平滑动卡片，生成带CSS Scroll Snap的HTML页面代码。
SVG转CSS背景工具 - 内联背景图代码
上传或粘贴SVG，将其编码为可安全嵌入CSS的background-image: url(data:...)字符串。
锥形渐变生成器 - 角度色标CSS圆锥渐变
生成类似饼图或彩虹旋转的conic-gradient，调节起始角度和色标位置。
Oklch颜色选择器 - 感知均匀色彩空间
使用Oklch色彩空间调节明度、饱和度和色调，预览人类感知均匀的颜色渐变。
Favicon在线生成器 - 文字/Emoji转网站图标
通过Canvas将文字、字母或Emoji渲染为多尺寸favicon.ico，快速为您的网站生成小图标。
CSS三角形生成器 - 纯CSS三角箭头在线生成
在线生成纯CSS三角形、箭头、气泡指示器，调整方向、大小和颜色，一键复制CSS代码。
贝塞尔缓动函数调校工具 - 自定义动画曲线
拖拽两控制点精细微调CSS `cubic-bezier()` 曲线并对比预设函数效果。
WCAG对比度调节器 - 微调颜色达标
输入背景和文字颜色，若对比度不达标，自动计算需微调至最近达标色的方案。
像素字号转视口单位 - vw字体换算
输入设计稿像素字号和画布宽度，反向计算出对应的vw单位和fallback。
预设动画库 - 常用CSS关键帧
浏览并一键复制常见CSS动画（跳动、淡入、滑动等）的@keyframes代码。
视差层构建器 - 多层滚动的HTML模板
配置多个背景层或前景层，设定各层滚动速度因子，生成完整视差页面代码。
角标Favicon生成器 - 带红点或数字的图标
上传图标并添加未读数的角标红点或数字，生成带提醒效果的网站Favicon。
浏览器标签页预览模拟 - 切换主题
设置浏览器标题和图标，模拟在暗色/亮色主题下标签栏的样子。
侧边抽屉菜单生成 - 响应式Drawer组件
生成一个从左侧或右侧滑出、带有透明遮罩层的移动端菜单组件。
密码显隐切换组件 - 眼睛图标交互
生成带眼睛图标的密码可见性切换输入框，包含完整的显示/隐藏JS逻辑。
空状态插画生成器 - 无数据占位符
为应用的空白页（如无订单、无消息）生成带插画和文案的HTML/CSS占位组件。
像素字体样本查看器 - 预览并复制CSS
浏览专用于像素风游戏的免费字体，输入文字实时预览并获取引入代码。
虚拟键盘API演示 - 控制键盘遮盖与布局
体验VirtualKeyboard API如何控制网页不被系统软键盘遮盖，并获取键盘几何信息。
PWA应用图标和徽章生成 - 自适应圆形
上传主图标，自动生成带安全区域内缩的maskable-icon和monochrome通知徽章。
CSS选择器构造器 - 基于关系和属性构建
通过勾选元素关系（子孙、兄弟）、属性、伪类等条件，自动生成精确的CSS选择器字符串。
时间轴JS生成器 - 交互式历史线组件
配置时间节点、标题和描述，生成可横向滚动的交互式时间轴HTML代码。
新拟态面板生成器 - 柔和凹凸面板
调整光照角度和阴影深浅，生成柔和的Neumorphism风格面板CSS代码。
纯CSS评论组件生成 - 嵌套精美样式
生成带嵌套、头像和元数据的纯CSS评论列表样式模板。
WCAG颜色矩阵测试 - 调色板互对比
输入一组颜色，生成矩阵显示每两色间的对比度和WCAG级别，确保调色板可访问。
Flexbox属性速查 - 可视对照表
可视化Flexbox容器和子项的所有属性及选项，鼠标悬停预览效果。
CSS 3D变换测试器 - 透视/旋转效果
实时调整rotateX/Y/Z、perspective和translateZ，查看3D变换视觉效果。
网页背景音乐控制器 - 静默自动播放尝试
生成一个带开关的网页背景音乐组件，尝试在用户交互后播放，不干扰默认静音策略。
首屏大图模板生成器 - 文字叠加背景图
选择背景图片（或使用占位色），配置标题、副标题和按钮，生成Hero区域代码。
页脚粘底生成器 - 始终在页面底部
生成确保页脚始终在页面底部（即使内容不足）的CSS代码，支持Flexbox/Grid方案。
SVG背景图案集 - 点线/网格/波纹等
提供数十种精致SVG背景纹理，可调颜色，生成CSS背景代码或下载SVG。
单选框/复选框美化器 - CSS自定义样式
打造自定义形状和颜色的选择框，生成隐藏原生控件并替换样式的完整代码。
按钮样式精选集 - 100种纯CSS按钮
浏览并复制100种不同风格的纯CSS按钮代码，含悬停和点击动效。
CSS缓动函数试玩场 - 所有预设一览
并列播放所有CSS内置缓动函数（ease, linear等）的动画效果，方便对比选择。
CSS属性兼容性表格 - 按使用率排序
搜索CSS属性和选择器，展示在主流浏览器的支持版本和全局使用率百分比。
纯CSS标签页生成器 - Radio按钮控制面板
生成使用隐藏radio按钮和CSS控制切换的内容标签页代码，无需JavaScript。
滚动捕捉沙盒 - CSS Scroll Snap实验
调整滚动容器和子项的对齐方式、停止点，观察CSS Scroll Snap平滑滑动效果。
渐变文高级生成器 - 多层渐隐层叠文字
叠加多层文字分别设置不同渐变色和混合模式，创造丰富文字特效，复制代码。
有机形状生成器 - CSS/SVG不规则圆角Blob
拖拽控制点或随机生成形状不规则的类圆图形，自动生成CSS border-radius或SVG路径代码。
背景滤镜生成器 - CSS backdrop-filter在线
单独对元素背景区域应用模糊、亮度、灰度等滤镜，生成兼容的CSS backdrop-filter属性。
CSS Reset代码生成器 - 统一默认样式重置
勾选或调整所需的重置元素（盒模型、边距等），生成自定义CSS Reset片段，确保跨浏览器一致性。
纯CSS模态弹窗生成 - 无JS弹出层
利用 `:target` 伪类创建无需JavaScript的弹窗组件，支持关闭按钮和遮罩层。
SVG噪点/颗粒质感生成器 - 叠加纹理背景
生成可平铺的细微颗粒、皱纸或帆布质感SVG滤镜，用于网页高级感。
复古终端样式生成器 - 绿色字符CRT效果
生成具有扫描线、荧光拖影和屏幕弯曲效果的纯CSS复古电脑终端样式。
页面平滑滚动导航条生成器 - 锚点过渡与监听
生成点击导航平滑滚动到对应Section并高亮当前菜单项的完整代码。
动态通知徽章生成器 - 数字抖动/红点特效
创建带有弹性动画的通知数字徽章或红点，生成对应的HTML/CSS代码。
滚动显隐导航栏生成器 - 上滑隐藏下滑现
生成随页面滚动而自动隐藏或显示的顶部导航栏代码，带平滑过渡。
SVG路径补间变形动画生成器
在两个不同形状的SVG路径间自动生成流畅的过渡变形动画SMIL代码。
形状过渡分割线生成 - 页面区块曲线背景
生成用于网页各区块间的波浪或倾斜过渡分割线，导出为SVG或CSS代码。
随机CSS图案生成器 - Doodle背景图
一键随机生成用纯CSS(带渐变和阴影)绘制的艺术背景图案，附带代码。
颜色变量命名工具 - 语义化名称建议
输入颜色十六进制值，根据色相和明度给出类似`--color-primary-500`的命名建议。
CSS动画时间轴编辑器 - 可视化关键帧
拖拽轨道上的关键帧，调整动画属性和时间点，直接生成@keyframes代码。
可变字体调节器 - 拖拽轴权预览
加载可变字体，通过滑块调整字重、字宽、倾斜等注册轴，并导出设置代码。
打字机占位符效果 - 输入框动画
生成在输入框内不断打字删除的动态占位符示例文字，提供HTML/CSS代码。
加载旋转器合集 - 数十种纯CSS加载动画
浏览数十种纯CSS实现的加载小动画，点击复制代码直接用于项目。
ResizeObserver演示 - 响应元素尺寸变化
拖拽改变一个div的大小，通过ResizeObserver API实时显示其新的宽度和高度。
滚动驱动动画沙盒 - Animation Timeline演示
绑定动画进度到滚动位置，交互式调整参数，直观理解scroll-timeline和view-timeline。
Google Fonts 配对推荐器 - 和谐字体组合
随机推荐视觉和谐的标题和正文字体配对，并显示预览和导入代码。
多设备同步预览框架 - iframe并排
输入URL，在同一个页面上并排显示手机/平板/桌面三种尺寸的实时预览。