Turn plain screenshots into stunning, presentation-ready images — entirely in your browser.
🇬🇧 English · 🇻🇳 Tiếng Việt
Screenshot Beautifier is a free, installable, browser-based tool that transforms plain screenshots into polished, presentation-ready images — complete with gradient/mesh/image backgrounds, browser or phone frames, drop shadows, and borders. Nothing is ever uploaded: every pixel is processed locally in your browser, and the app keeps working even without an internet connection.
| Category | Details |
|---|---|
| Backgrounds | Gradient presets, solid colors, mesh gradients, or a custom uploaded image (with blur) |
| Frames | macOS-style browser bar, or a modern phone notch — light or dark |
| Shadow | Configurable size, opacity, and color |
| Border & radius | Corner rounding plus an optional stroke border |
| Export | PNG / JPG / WebP, 1×–3× scale, adjustable quality |
| Clipboard | Copy the rendered image directly, no download needed |
| Theming | Light, Dark, and System — full Material Design 3 |
| Languages | English and Vietnamese, switchable anytime |
| Settings memory | Every adjustment is saved to localStorage |
| PWA | Installable on desktop and mobile, works offline via a service worker |
| Responsive | A side panel on desktop; a Material bottom sheet + quick-export FAB on mobile |
| Paste to upload | Ctrl+V / Cmd+V pastes a screenshot straight from the clipboard |
- Upload — drag & drop, click Browse Files, or paste (
Ctrl+V) a screenshot. - Customize — adjust background, frame, shadow, border, and padding from the controls panel (a bottom sheet on mobile — tap the handle to expand it).
- Export — pick a format and scale, then hit Export (or use the copy button to skip the download).
Screenshot Beautifier is a fully installable PWA:
- Desktop / Android (Chrome, Edge, etc.) — tap the install icon in the top bar, or the "Install app" banner, and it's added like a native app with its own window.
- iOS Safari — Safari doesn't expose an install prompt API, so tapping the install icon there opens step-by-step "Add to Home Screen" instructions instead.
- Offline — a service worker caches the app shell on first visit, so the editor keeps working without a network connection.
The interface follows Material Design 3, with a custom "Iris & Plum" palette: an indigo-violet primary, a muted teal secondary, and a rose-plum tertiary accent — echoing the gradient presets the tool itself paints with. Both light and dark tonal palettes are defined as CSS custom properties in style.css, so re-theming the whole app means editing a handful of variables in one place.
- Vanilla HTML, CSS, and JavaScript — no build step, no framework, no dependencies to install
- html2canvas for rendering the final composition to an image
- Be Vietnam Pro (full Vietnamese glyph support) + JetBrains Mono for data/labels
- Material Symbols (Rounded) for iconography
- A hand-written Service Worker + Web App Manifest for PWA/offline support
screenshot-beautifier/
├── index.html # Markup: top bar, canvas panel, controls panel/sheet, dialogs
├── style.css # Material Design 3 tokens, components, responsive rules
├── app.js # State, rendering, export, PWA install flow, i18n
├── manifest.json # Web App Manifest (icons, theme colors, shortcuts)
├── sw.js # Service Worker: app-shell caching for offline use
├── favicon.svg # Vector app icon (also used as the browser favicon)
└── icon-*.png # Generated PNG icons (192/512, incl. maskable + Apple touch)
No build tools required — just serve the folder statically:
# Option 1
npx serve .
# Option 2
python3 -m http.server 8080Then open http://localhost:8080 (or whichever port your server prints).
Chrome 90+, Edge 90+, Firefox 88+, Safari 15+. Installability (beforeinstallprompt) is Chromium-only; Safari/iOS use the manual "Add to Home Screen" flow described above.
MIT License — free to use, modify, and redistribute.
Screenshot Beautifier là công cụ miễn phí, có thể cài đặt như ứng dụng, chạy hoàn toàn trong trình duyệt — giúp biến ảnh chụp màn hình đơn giản thành hình ảnh trình bày chuyên nghiệp với nền gradient/mesh/hình ảnh, khung trình duyệt hoặc điện thoại, bóng đổ và viền. Không có gì được tải lên máy chủ — mọi thứ xử lý ngay trên trình duyệt của bạn, và ứng dụng vẫn hoạt động cả khi mất kết nối mạng.
| Nhóm | Chi tiết |
|---|---|
| Nền | Gradient dựng sẵn, màu đơn sắc, gradient lưới, hoặc ảnh tuỳ chỉnh (kèm làm mờ) |
| Khung | Thanh trình duyệt kiểu macOS, hoặc khung notch điện thoại — sáng hoặc tối |
| Bóng đổ | Tuỳ chỉnh kích thước, độ mờ, màu sắc |
| Viền & bo góc | Bo góc linh hoạt, kèm viền tuỳ chọn |
| Xuất ảnh | PNG / JPG / WebP, tỉ lệ 1×–3×, chất lượng tuỳ chỉnh |
| Clipboard | Sao chép ảnh trực tiếp, không cần tải xuống |
| Giao diện | Sáng, Tối, Theo hệ thống — chuẩn Material Design 3 |
| Ngôn ngữ | Tiếng Anh và Tiếng Việt, đổi bất kỳ lúc nào |
| Ghi nhớ cài đặt | Mọi tuỳ chỉnh được lưu vào localStorage |
| PWA | Cài đặt được trên máy tính và điện thoại, hoạt động offline nhờ service worker |
| Responsive | Bảng điều khiển bên cạnh trên desktop; bottom sheet kiểu Material + nút xuất nhanh (FAB) trên di động |
| Dán để tải ảnh | Ctrl+V / Cmd+V để dán ảnh chụp màn hình trực tiếp từ clipboard |
- Tải ảnh lên — kéo thả, nhấn Chọn Tệp, hoặc dán (
Ctrl+V) ảnh chụp màn hình. - Tuỳ chỉnh — điều chỉnh nền, khung, bóng, viền và khoảng đệm ở bảng điều khiển (là bottom sheet trên di động — nhấn vào tay cầm để mở rộng).
- Xuất ảnh — chọn định dạng và tỉ lệ, sau đó nhấn Xuất ảnh (hoặc dùng nút sao chép để bỏ qua bước tải xuống).
Screenshot Beautifier là một PWA có thể cài đặt đầy đủ:
- Desktop / Android (Chrome, Edge...) — nhấn biểu tượng cài đặt trên thanh trên cùng, hoặc banner "Cài đặt ứng dụng", ứng dụng sẽ được thêm vào như một ứng dụng gốc với cửa sổ riêng.
- iOS Safari — Safari không hỗ trợ API gợi ý cài đặt, nên khi nhấn biểu tượng cài đặt, ứng dụng sẽ hiển thị hướng dẫn từng bước "Thêm vào Màn hình chính" thay thế.
- Offline — service worker lưu bộ khung ứng dụng vào cache ngay lần truy cập đầu, nên trình chỉnh sửa vẫn hoạt động khi không có mạng.
Giao diện tuân theo Material Design 3, với bảng màu tuỳ chỉnh "Iris & Plum": màu chính tím-chàm (indigo-violet), màu phụ xanh ngọc trầm, và điểm nhấn hồng-mận — gợi lại chính các mẫu gradient mà công cụ này cho phép bạn vẽ nên. Cả bảng màu sáng và tối đều được định nghĩa dưới dạng CSS custom properties trong style.css, nên việc đổi toàn bộ giao diện chỉ cần chỉnh một vài biến số ở một nơi duy nhất.
- HTML, CSS, JavaScript thuần — không cần bước build, không framework, không phụ thuộc phải cài đặt
- html2canvas để render bố cục cuối cùng thành ảnh
- Be Vietnam Pro (hỗ trợ đầy đủ ký tự tiếng Việt) + JetBrains Mono cho nhãn/dữ liệu
- Material Symbols (Rounded) cho biểu tượng
- Service Worker và Web App Manifest tự viết để hỗ trợ PWA/offline
screenshot-beautifier/
├── index.html # Bố cục: thanh trên cùng, khung canvas, bảng điều khiển/sheet, hộp thoại
├── style.css # Token Material Design 3, component, quy tắc responsive
├── app.js # State, render, xuất ảnh, luồng cài đặt PWA, i18n
├── manifest.json # Web App Manifest (icon, màu chủ đề, shortcut)
├── sw.js # Service Worker: cache bộ khung ứng dụng để dùng offline
├── favicon.svg # Icon vector của ứng dụng (dùng luôn làm favicon trình duyệt)
└── icon-*.png # Icon PNG đã tạo sẵn (192/512, gồm bản maskable + Apple touch)
Không cần công cụ build — chỉ cần chạy thư mục này như một máy chủ tĩnh:
# Cách 1
npx serve .
# Cách 2
python3 -m http.server 8080Sau đó mở http://localhost:8080 (hoặc cổng mà máy chủ của bạn hiển thị).
Chrome 90+, Edge 90+, Firefox 88+, Safari 15+. Khả năng cài đặt (beforeinstallprompt) chỉ có trên nền Chromium; Safari/iOS dùng luồng "Thêm vào Màn hình chính" thủ công như mô tả ở trên.
MIT License — miễn phí sử dụng, chỉnh sửa và phân phối lại.