渐变背景合集 - 现成UI Gradient一键复制
精选数百种流行渐变配色,点击即复制CSS代码,用于网页或应用背景。
PWA启动画面生成 - 图标与背景色配置
配置启动画面背景色与图标,生成对应manifest和meta标签代码。
开关切换按钮生成器 - iOS/Android风格
生成形似iOS或Android的开关切换按钮,支持动画和自定义颜色。
首屏大图构建器 - 标题/按钮/背景
设计带有大标题、描述、CTA 按钮和背景图的首屏区域,生成完整代码。
形状过渡分割线生成 - 页面区块曲线背景
生成用于网页各区块间的波浪或倾斜过渡分割线,导出为SVG或CSS代码。
暗色模式色板生成器 - 深色UI设计
通过调整深色背景与前景色的对比度,生成符合无障碍标准的深色主题色彩方案。
精灵帧动画生成器 - 多图播放及CSS动画
上传序列帧图片,合成spritesheet并生成对应CSS steps()帧动画代码。
DOM样式实时编辑 - 仅预览不修改
输入CSS选择器和属性值,瞬间预览在当前页面元素上的效果(不改变实际样式)。
墙壁颜色模拟器 - 照片替换刷漆效果
上传房间照片,选取目标区域改变颜色,预览不同墙漆效果,辅助选色。
Canvas噪点纹理生成 - 可下载背景图
通过Canvas生成不同粒度、颜色的噪点纹理图片,适合用作页面背景或叠加。
图标字体实时预览 - 输入码点测试大小
粘贴自定义图标字体的Unicode,调节尺寸颜色立即查看效果。
GIF分解精灵图导出 - 提取单帧和CSS定位
上传GIF并自动水平平铺提取各帧,生成对应的CSS精灵图定位代码。
CSS3渐变色库 - 预设精美渐变代码速查
浏览数百款精选CSS渐变背景,点击即可复制线性渐变或径向渐变代码,快速美化页面。
状态机可视化工具 - 绘制状态图并生成代码
拖拽添加状态和转换,定义事件和动作,生成 JavaScript 状态机代码。
CSS 3D变换测试器 - 透视/旋转效果
实时调整rotateX/Y/Z、perspective和translateZ,查看3D变换视觉效果。
图片高斯模糊工具 - Canvas在线模糊效果
在线对图片应用高斯模糊滤镜,可通过滑块调节模糊半径强度,实时预览效果并下载。
新拟态调色板 - 根据背景色自动生成凹凸色
选择主背景色,自动推荐浅色高光和深色阴影值,用于新拟态UI。
交互式图像分割演示 - 点击选择对象
使用 SAM 或其他前端模型,点击图片中的对象区域实现像素级分割,体验智能抠图。
代码片段转图片 - 高亮代码导出为美观图片
粘贴代码并选择高亮主题,将代码片段渲染为精美的PNG图片,便于社交媒体分享。
视频动态缩略图生成器 - 提取片段生成 GIF
选择视频的一个片段,生成几秒钟的 GIF 动图作为预览缩略图,可设置尺寸和帧率。
交互式图像分割演示 - 点击分离对象
在图像上点击,利用前端模型将点击范围内的主要物体自动从背景分离。
通知提示音试听 - 各种UI提醒声音
内置多种轻短的通知声音,点击试听,选择配套项目使用(提供Base64代码)。
浏览器标签页预览模拟 - 切换主题
设置浏览器标题和图标,模拟在暗色/亮色主题下标签栏的样子。
剪影生成器 - 提取人物/物体轮廓变黑
上传正面照,简单亮度阈值提取剪影,可下载PNG。
响应式设计测试工具 - 多分辨率视口预览
在线响应式布局测试器,同时预览常见设备分辨率的网页显示效果,帮助检查前端适配。
图片直方图查看器 - RGB/亮度通道分析
上传图片,绘制其亮度及红绿蓝通道的直方图,辅助曝光评估。
图片色彩直方图查看器 - RGB/亮度通道分布
上传图片,显示红、绿、蓝及亮度通道的直方图,辅助评估曝光与色彩分布。
DOM元素截图工具 - 指定区域导出图片
选中页面上的某个HTML元素,利用html2canvas将其渲染为PNG图片下载。
图片渐变色提取器 - 在线分析图片主渐变
从上传的图片中智能提取主要渐变色方向与色标,生成对应CSS渐变代码,用于设计背景。
GIF动图制作器 - 多图合成动画GIF
上传多张图片或拍摄连拍,调整帧延迟和尺寸,纯前端合成GIF动画并下载。
UD5工具箱