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 資訊查看/清除」工具。
不用註冊,不用等待,處理完直接下載。