UD5工具箱
Web App Manifest 图标预览 - 模拟主屏图标效果
上传图标文件并设置背景色，模拟在 Android/iOS 主屏幕上的添加效果，检查视觉适配。
iOS主屏图标预览 - 上传图标看添加效果
iOS 主屏图标预览
上传图标，即刻预览在 iPhone 主屏幕和 Dock 栏的真实效果
点击上传或拖拽图标到此处
支持 PNG / JPG / WebP，建议 ≥ 1024×1024px
图标信息
-
显示约 64×64pt
App Store 提交需 1024×1024px PNG，iOS 自动生成各尺寸并添加圆角。
模拟 iPhone 15 Pro 主屏幕 · 图标自动应用 iOS squircle 圆角
常见问题 & 图标设计指南
iOS 图标需要多大尺寸？
App Store 提交需要 1024×1024px 的 PNG 格式图标。Xcode 会自动生成 180px(@3x)、120px(@2x) 等各尺寸变体。iPhone 主屏幕上图标实际显示约 60pt（即 180px @3x 分辨率）。
iOS 图标的圆角是多少？
iOS 使用 squircle（超椭圆） 形状，并非简单圆角矩形。其曲率约为边长的 22.37%。你无需手动处理——上传方形图标到 App Store，系统会自动裁剪。预览工具使用 CSS border-radius: 22% 近似模拟。
图标可以包含透明区域吗？
不建议使用透明背景。iOS 图标应为完全不透明的方形图片。如果上传包含透明区域的图标，iOS 会在透明区域填充黑色，效果通常不理想。建议使用纯色或渐变背景填满整个 1024×1024 画布。
主屏幕图标和 App Store 图标有区别吗？
它们是同一张图。你只需提供 1024×1024px 的图标给 App Store Connect，系统会自动缩放并应用到所有场景（主屏幕、Spotlight、设置等）。无需单独制作不同尺寸。
如何设计一个好的 iOS 图标？
保持简洁，避免过多细节（缩小后会丢失）；使用高对比度颜色；确保在浅色和深色壁纸上都清晰可见；考虑添加轻微的渐变和阴影增加层次感；参考 Apple 的 Human Interface Guidelines。
为什么预览中图标有蓝色光晕？
蓝色光晕用于高亮标识您上传的图标在模拟屏幕中的位置，方便快速定位。真实 iOS 设备上不会有此外框效果。您可以通过下拉菜单更改图标在屏幕中的展示位置。
Lottie动画预览器 - 拖放JSON查看动效
加载Lottie动画JSON文件，播放并控制速度、方向，预览动效效果。
预设动画库 - 常用CSS关键帧
浏览并一键复制常见CSS动画（跳动、淡入、滑动等）的@keyframes代码。
漏光效果添加 - 图片角落红黄色调渐变
为图片添加类似胶片漏光的红黄色调渐变或光晕效果，营造怀旧氛围。
毛玻璃面板生成器 - 模糊/透明度/边框精细调节
拖拽滑块调整背景模糊度、透明度与边框发光，实时预览毛玻璃面板并复制CSS代码。
毛玻璃效果生成器 - CSS Glassmorphism在线
调整透明度、模糊度和边框，实时预览毛玻璃UI卡片，生成兼容CSS backdrop-filter代码。
首屏大图模板生成器 - 文字叠加背景图
选择背景图片（或使用占位色），配置标题、副标题和按钮，生成Hero区域代码。
悬停提示框生成器 - 纯CSS/JS气泡样式定制
选择触发位置、箭头方向与样式，生成轻量悬停提示框代码。
CSS 作用域演示 - Shadow DOM 样式隔离效果
创建 Shadow DOM 与普通 DOM 元素，对比样式隔离效果，理解 @layer 和 scoped styles。
CSS 光标样式预览工具 - 所有内置光标效果展示
列出所有标准 CSS 光标值（pointer, grab, zoom-in 等），鼠标悬停实时查看对应光标样式并复制代码。
点彩画效果生成器 - Voronoi格子点描风格
通过加权Voronoi点算法将图片转换为类似针笔画的黑白点描艺术效果。
范围滑块预设集 - 复制各种风格range CSS
展示多种风格的<input type=range>样式，一键复制定制代码。
Material You取色生成器 - 壁纸配色方案
上传壁纸，根据Material Design 3的算法生成瑟拉斯等色系的CSS变量代码。
现代平滑阴影生成器 - 多层阴影叠加
通过叠加多个阴影创建柔和且真实的UI投影，导出CSS。
滚动吸附生成器 - 全屏滚动页面模板
配置多屏垂直或水平滑动卡片，生成带CSS Scroll Snap的HTML页面代码。
CSS 滚动条样式生成器 - ::-webkit-scrollbar 自定义美化
通过可视化控件定制滚动条轨道、滑块、按钮等伪元素样式，即时预览并复制生成代码。
SVG背景图案集 - 点线/网格/波纹等
提供数十种精致SVG背景纹理，可调颜色，生成CSS背景代码或下载SVG。
图层混合模式演示 - 叠加/柔光等在线比较
上传两张图片，实时切换并预览正片叠底、滤色、叠加等多种混合模式效果。
CSS Grid 调试覆盖层 - 显示网格线与区域
在页面上叠加可拖拽的半透明网格线，辅助网格布局对齐。
实时协作画板 - 通过WebSocket同步
基于简单WebSocket服务，多人同时在同一画布上绘图，远程协作。
多层阴影生成器增强版 - 可添加多个光源
叠加多重box-shadow，模拟不同光源方向，直观生成逼真阴影CSS代码。
视差层构建器 - 多层滚动的HTML模板
配置多个背景层或前景层，设定各层滚动速度因子，生成完整视差页面代码。
波普艺术效果生成器 - 沃霍尔风格四宫格
将照片转为安迪·沃霍尔风格的丝网印刷波普四宫格，可替换每个格子的色彩。
双色调效果生成 - 高光阴影颜色映射
将图片灰度化后，把阴影区域映射为一种颜色，高光映射为另一种，创造经典双色效果。
测试覆盖率可视化器 - 上传 lcov 文件查看行覆盖
拖放 lcov.info 文件，以颜色标示每行代码的覆盖状态。
滚动驱动动画创作台 - 基于Scroll Timeline的可视化
配置滚动容器与目标元素，自定义随滚动触发的关键帧动画，输出纯CSS代码。
文本高亮效果生成器 - 荧光笔/下划线动画
制作像荧光笔划过的高亮背景或扫描下划线效果，导出类名。
JSON 结构树浏览器 - 交互展开与路径复制
粘贴JSON对象，生成可折叠的树形视图，点击节点复制其键值路径，方便调试。
Popover弹窗生成器 - 纯HTML声明式弹出层
配置内容和位置，生成使用最新HTML popover属性的轻量弹窗代码，无需JavaScript。
图片幻灯生成器 - 序列帧转视频WebM
上传一组图片，设定每张展示秒数和转场，生成WebM视频幻灯。