UD5工具箱
输入文本,滑块调节letter-spacing和word-spacing,实时显示效果并复制CSS。
制作像荧光笔划过的高亮背景或扫描下划线效果,导出类名。
可视化浏览 Tailwind CSS 所有内置颜色的 50-950 色阶,点击复制类名或色值。
展示 CSS 系统颜色关键字(如 CanvasText, LinkText)在明暗模式下的实际渲染值。
粘贴HTML和基本CSS,分析渲染后视觉顺序与DOM顺序的差异,避免可访问性问题。
搜索CSS属性,显示其在主流浏览器的支持范围和前缀需求,快速避免踩坑。
显示文本中的非换行空格、全角空格等隐藏字符映射。
定义多个 CSS 自定义属性,通过滑块或颜色选择器实时修改并查看页面整体风格变化。
选择背景图片(或使用占位色),配置标题、副标题和按钮,生成Hero区域代码。
设定最小、首选、最大三个尺寸及视口范围,生成响应式CSS clamp()表达式。
加载Lottie动画JSON文件,播放并控制速度、方向,预览动效效果。
生成具有扫描线、荧光拖影和屏幕弯曲效果的纯CSS复古电脑终端样式。
选择多张图片或纯色叠加,切换所有CSS混合模式并实时预览图层效果。
列出所有标准 CSS 光标值(pointer, grab, zoom-in 等),鼠标悬停实时查看对应光标样式并复制代码。
调整透明度、模糊度和边框,实时预览毛玻璃UI卡片,生成兼容CSS backdrop-filter代码。
检测浏览器是否支持显示AVIF图片,为前端图片选型提供依据。
创建 Shadow DOM 与普通 DOM 元素,对比样式隔离效果,理解 @layer 和 scoped styles。
通过可视化控件定制滚动条轨道、滑块、按钮等伪元素样式,即时预览并复制生成代码。
拖拽顶点或选择预定义形状,可视生成CSS clip-path多边形、圆形、椭圆等,实时预览并复制代码。
选择触发位置、箭头方向与样式,生成轻量悬停提示框代码。
上传一组图片,设定每张展示秒数和转场,生成WebM视频幻灯。
创建带有向下箭头和自定选项风格的自定义选择框HTML+CSS代码。
拖放 lcov.info 文件,以颜色标示每行代码的覆盖状态。
批量将文本中的<,>,&,等转换为HTML实体,或反向还原,包含选项保留已转义实体。
设置文字、速度和方向,生成使用 CSS 动画实现的滚动横幅代码。
浏览并一键复制常见CSS动画(跳动、淡入、滑动等)的@keyframes代码。
提取HTML中内联style属性或嵌入式style标签,转变为独立CSS规则,辅助样式重构。
应用 contain 的各种值(layout, paint, size),直观对比开启前后渲染和布局的变化。
展示几组在各类色盲下仍可区分的定性数据配色方案,含Hex码。
调节宽度、颜色、条纹动画等参数,实时预览并生成进度条HTML/CSS。