App/网页截图加圆角投影展示
给产品介绍页、作品集里的界面截图加上圆角和柔和阴影,模拟真实设备展示效果,让截图看起来更精致专业。
效果渲染和导出全程在浏览器本地完成,图片不会经过任何服务器
三种效果可以单独使用也可以叠加组合,覆盖大部分精修展示需求
拖动滑块画面立即更新,确认满意后再下载,不用反复试错
不用注册、不用付费,也没有隐藏的使用次数限制
搭配建议
不同场景适合不同的参数组合,先参考这份速查表再微调,比从零尝试更快找到满意的效果。
| 效果组合 | 推荐参数范围 | 适合场景 |
|---|---|---|
| 轻微圆角 + 柔和阴影 | 圆角 8%~15%,阴影透明度 25%~40%,模糊范围较大、投影距离较小 | App/网页截图展示,模拟悬浮卡片效果 |
| 大圆角 + 无阴影 | 圆角 25%以上,不启用阴影 | 头像、图标类图片,追求圆润可爱的视觉风格 |
| 细边框 + 无阴影或轻阴影 | 边框宽度较窄,颜色接近背景色或白色 | 电商产品图,在白底背景上增加边界感 |
| 直角 + 明显阴影 | 圆角 0%,阴影透明度 40%以上,投影距离较大 | 强调立体悬浮感的宣传图、海报元素 |
以上仅为常见搭配思路,实际效果和图片本身的构图、背景颜色有关,建议在预览区拖动滑块反复对比,找到最符合当前图片的参数组合。
使用方法
不需要安装任何软件,全程在网页里完成,画面实时更新。
点击选择或直接把图片拖进网页,支持 JPG、PNG、WebP、GIF,单张不超过 20MB,每次只处理一张。
拖动圆角滑块实时调整四角弧度,画面立即更新预览效果。
按需开启边框和阴影,设置各自的颜色、宽度、透明度和范围,还可以设置画布背景颜色。
确认效果满意后点击下载,图片会按当前设置重新生成并保存到本地。
技术说明
拖动滑块时,预览画面借助浏览器原生的 CSS 圆角、边框、阴影样式即时渲染;点击下载时,会用浏览器 Canvas 绘图接口按完全相同的比例参数重新绘制并编码成图片文件,确保下载结果和预览效果保持一致,全程在你的设备本地完成,不经过任何服务器。
启用阴影或较宽的边框后,效果需要向图片四周扩展一定范围才能完整显示,不会被裁切;导出时画布会根据当前的阴影模糊范围、投影距离和边框宽度自动计算需要扩展的边距,多出的区域按选择的背景颜色填充或保持透明。不需要阴影和边框时(都设为关闭或数值为 0),导出图片尺寸会和原图保持一致。
常见问题
不支持。这个工具定位为单图精修,圆角半径、阴影强弱是否合适,通常需要针对该图片的具体比例和用途逐张预览确认,比如方形截图和长条形海报需要的圆角比例明显不同,套用同一套参数容易出现效果不协调,所以设计为单张图片精细调节的工具。如果需要处理多张图片,建议逐张打开分别调整。
完全在你当前设备的浏览器里完成,实时预览借助浏览器原生的 CSS 边框、圆角、阴影样式即时渲染,下载时再用 Canvas 按相同参数重新绘制生成最终图片,全程不会把原图上传到任何服务器。
因为阴影需要向外扩散一定范围才能看清投影效果,如果画布和原图一样大,阴影会被直接裁掉看不到;所以导出时会根据当前设置的阴影模糊范围、投影距离和边框宽度自动向四周扩展画布,多出的区域按你选择的背景颜色填充(或保持透明),确保阴影完整显示,不会被裁切。
JPG 格式本身不支持透明通道,选择透明背景但原图是 JPG 格式时,透明区域会自动改用白色填充,这是 JPG 格式的固有限制,不是处理出错。如果需要真正的透明背景,请上传 PNG 或 WebP 格式的图片,处理后导出结果就会保留透明背景。
都是按图片自身宽高的比例计算,而不是固定像素值,这样不管上传的图片分辨率是大是小,同样的滑块数值都能得到视觉比例一致的效果,预览时看到的效果和下载后生成的最终图片效果也完全一致。
处理本质是重新绘制并编码:原图如果带透明背景,透明区域在圆角以外的部分仍会保留(除非选择了不透明的背景颜色进行填充)。原图的 EXIF 拍摄参数、位置等元数据在重新编码后不会保留,如果需要专门查看或清除 EXIF,可以使用「EXIF 信息查看/清除」工具。
不用注册,不用等待,处理完直接下载。