UD5工具箱
DOM事件监控器 - 实时录制显示触发事件
记录页面交互触发的所有DOM事件及其目标、冒泡阶段，以日志和瀑布形式展示。
DOM样式实时编辑 - 仅预览不修改
DOM样式实时编辑
沙箱预览 · 安全隔离 · 不修改任何实际内容
0 字符
🔍 实时预览
就绪
×
纯CSS模态弹窗生成 - 无JS弹出层
利用 `:target` 伪类创建无需JavaScript的弹窗组件，支持关闭按钮和遮罩层。
DOM元素截图工具 - 指定区域导出图片
选中页面上的某个HTML元素，利用html2canvas将其渲染为PNG图片下载。
开关切换按钮生成器 - iOS/Android风格
生成形似iOS或Android的开关切换按钮，支持动画和自定义颜色。
图标字体实时预览 - 输入码点测试大小
粘贴自定义图标字体的Unicode，调节尺寸颜色立即查看效果。
DOM 变更性能分析器 - 记录并统计重排重绘
开启监听后操作页面，统计 DOM 变化次数和频率，帮助定位布局抖动。
图片背景预览器 - 不同UI背景效果模拟
上传图片并在白色、黑色、透明等背景上预览效果，辅助电商首图或UI元素设计。
控制台日志样式生成 - %c美化输出
配置字体、颜色、背景，生成可粘贴到浏览器控制台的%c格式化日志代码。
形状过渡分割线生成 - 页面区块曲线背景
生成用于网页各区块间的波浪或倾斜过渡分割线，导出为SVG或CSS代码。
CSS3渐变色库 - 预设精美渐变代码速查
浏览数百款精选CSS渐变背景，点击即可复制线性渐变或径向渐变代码，快速美化页面。
分页组件生成器 - 自定义样式与按钮
设置总页数与当前页，生成数字式或省略式分页导航条。
浏览器标签页预览模拟 - 切换主题
设置浏览器标题和图标，模拟在暗色/亮色主题下标签栏的样子。
内置Web组件演示 - 原生自定义元素
展示一些常用内置HTML元素和自定义元素例子，提供代码复制。
滚动条样式预览 - Webkit滚动条美化与代码
交互式调整滚动条宽度、滑块颜色、圆角等，预览容器滚动效果，复制::-webkit-scrollbar代码。
单选框/复选框美化器 - CSS自定义样式
打造自定义形状和颜色的选择框，生成隐藏原生控件并替换样式的完整代码。
轮播图代码生成器 - 滑动幻灯片HTML/JS
拖拽添加图片与文字，生成响应式轮播图Slider，支持自动播放和导航点，提供HTML/CSS/JS代码。
代码片段转图片 - 高亮代码导出为美观图片
粘贴代码并选择高亮主题，将代码片段渲染为精美的PNG图片，便于社交媒体分享。
View Transition API 演练场 - 页面切换动画配置
在单页内模拟MPA过渡效果，自定义进场/出场动画，体验View Transitions API丝滑切换。
排版比例预览器 - 模块化比例尺生成
选择基数大小与比例（如黄金比例），预览标题到正文字号层叠样式序列。
GIF分解精灵图导出 - 提取单帧和CSS定位
上传GIF并自动水平平铺提取各帧，生成对应的CSS精灵图定位代码。
精灵帧动画生成器 - 多图播放及CSS动画
上传序列帧图片，合成spritesheet并生成对应CSS steps()帧动画代码。
二维码美化器 - 定制颜色圆点样式
生成二维码的同时设置渐变色彩、圆角方块、添加中心Logo，并调节容错。
CSS 3D变换测试器 - 透视/旋转效果
实时调整rotateX/Y/Z、perspective和translateZ，查看3D变换视觉效果。
滑动下划线动画生成器 - 菜单悬停特效CSS
配置下划线从中间或一侧滑出的动画，生成无限菜单效果代码。
渐变背景合集 - 现成UI Gradient一键复制
精选数百种流行渐变配色，点击即复制CSS代码，用于网页或应用背景。
Popover API 实例展示 - 无JS的弹出层构建
使用原生HTML Popover属性创建提示、菜单与对话框，展示四种触发方式及样式定制。
视频片段转GIF - 选取时间段导出动图
上传视频，截取其中一小段并转换GIF，可调帧率和尺寸，前端转换。
CSS图案生成器 - 条纹/格子/圆点背景代码
选择条纹、网格、波点等预设图案，调节颜色和尺寸，生成纯CSS background代码。
网页CSS变量提取为色板 - 一键查看站点主题色
输入网址，提取页面定义的所有CSS自定义属性（颜色），生成直观调色板。
代码语法高亮工具 - 在线代码美化展示
粘贴代码自动进行语法高亮显示，支持主流编程语言，生成带行号的HTML代码块，方便嵌入博客。