Phần đầu landing page
Ảnh chụp trong khung trình duyệt cho người xem hiểu ngay đây là một web app. Dùng nền trong suốt (PNG hoặc WebP) để đặt lên phần trang màu gì cũng hợp.
Mockup website online: đặt ảnh chụp vào khung trình duyệt
Tạo mockup website online bằng cách đặt ảnh chụp sản phẩm vào khung trình duyệt Chrome, macOS hoặc Windows, với URL và tiêu đề tab do bạn đặt, rồi xuất ra cho landing page, bài ra mắt hay tài liệu hướng dẫn. Màn hình chưa công bố không bị tải lên đâu cả.
- URL và tiêu đề tab của bạn
- Không tải ảnh lên
- Không đóng dấu
Mockup website
Đang tải ảnh mẫu
Ảnh mẫu· thả ảnh, hoặc dán bằng CtrlV
Ảnh xuất 0 × 0 px· ở yên trên máy này
Dán CtrlVTải về CtrlS
Ảnh ở yên trên máy bạn. File được xử lý ngay trong tab trình duyệt này. Không có gì bị tải lên, lưu lại hay gửi đi đâu cả.
Cập nhật tháng 10 năm 2026
Trả lời nhanh
Để tạo mockup website, hãy thả ảnh chụp màn hình vào công cụ phía trên, chọn khung trình duyệt và gõ URL bạn muốn vào thanh địa chỉ. Thêm nền và lề nếu mockup sẽ nằm trên một trang nhiều chi tiết, chọn kích thước như 16:9 cho bài đăng mạng xã hội, rồi tải về PNG. Đặt nền là Không để có mockup nền trong suốt, đặt lên màu nào cũng được.
Che dữ liệu riêng trước khi làm mockup
Sản phẩm thật, không lộ khách hàng thật
Ảnh sản phẩm đẹp nhất là ảnh chụp từ ứng dụng thật, mà ứng dụng thật thì đầy tên, email và doanh thu thật. Tiện ích Chrome Blurr.ing làm mờ những thứ đó ngay trên trang đang mở, rồi phím tắt chụp màn hình của tiện ích chụp lại với các vùng mờ đã nằm sẵn trong ảnh, kèm tùy chọn khung cửa sổ trình duyệt, nền, lề và bo góc.
- Làm mờ trong trang là miễn phí và không giới hạn.
- Gói miễn phí có 5 lần chụp màn hình; Premium không giới hạn số lần chụp.
- Ảnh được tạo trong trình duyệt của bạn và không bao giờ bị tải lên.
Thêm vào Chrome
Cài đặt miễn phí, dành cho Chrome trên máy tính.
Cách làm
Cách tạo mockup website
Bốn bước, khoảng một phút, không cần phần mềm thiết kế.
- 1
Đưa ảnh chụp màn hình vào
Thả ảnh chụp sản phẩm của bạn vào khung xem trước, dán bằng Ctrl+V (Cmd+V trên Mac), hoặc bấm Chọn ảnh. Trước đó, công cụ hiện một trang mẫu.
- 2
Chọn khung trình duyệt
Chọn Chrome trên macOS hoặc Windows, thanh trình duyệt macOS hoặc Windows, cửa sổ macOS hoặc Windows trơn, hoặc không khung. Đặt giao diện sáng, tối, hoặc tự động cho khớp với phần trên cùng của ảnh.
- 3
Gõ URL và tiêu đề tab
Gõ địa chỉ bạn muốn vào thanh địa chỉ, ví dụ sanphamcuaban.com/bang-gia, và tiêu đề tab cho khung Chrome. URL không cần là trang thật đang chạy.
- 4
Chỉnh khung ảnh và xuất
Thêm nền, lề, bo góc và đổ bóng, chọn kích thước như 16:9 hay 1:1, rồi tải về PNG, JPEG hoặc WebP ở độ phân giải gốc, hoặc sao chép vào clipboard.
Dùng khi nào
Ảnh sản phẩm nhìn là biết ngay “web app”
Ảnh chụp trơn chỉ là một khối giao diện. Cũng ảnh đó đặt trong khung trình duyệt cho người xem biết nó chạy ở đâu và là loại sản phẩm gì.
Bài ra mắt và bộ ảnh giới thiệu
Bộ ảnh trên Product Hunt, bài đăng ra mắt hay nhật ký cập nhật đều trình bày sản phẩm rõ hơn khi có bối cảnh thay vì một mảnh cắt trơn. Chọn 16:9 hoặc 1.91:1 để khung không bị cắt trong ảnh xem trước.
Tài liệu và bài hướng dẫn
Khung trình duyệt có đường dẫn thật trên thanh địa chỉ cho người đọc biết chính xác mỗi bước diễn ra ở trang nào, điều mà một mảnh giao diện cắt rời không làm được.
Mạng xã hội và slide
Các kích thước cho X, LinkedIn, bài đăng và ảnh dọc Instagram, story và Dribbble nới khung ảnh theo tỉ lệ mà không cắt ảnh chụp của bạn.
Các loại khung
Sáu khung trình duyệt và cửa sổ
Mỗi khung được vẽ bằng hình phẳng theo đúng độ phân giải của ảnh, sáng hoặc tối, nên vẫn sắc nét trên ảnh chụp từ màn hình Retina.
- Chrome trên macOS
- Một thanh tab có ba nút đèn của cửa sổ và một tab (biểu tượng, tiêu đề, nút đóng) phía trên thanh công cụ có nút lùi, tiến, tải lại và thanh địa chỉ. Khung nhìn ra “web app” rõ nhất.
- Chrome trên Windows
- Vẫn thanh tab và thanh công cụ đó, nhưng các nút thu nhỏ, phóng to và đóng nằm ở đầu phải thanh tab, đúng như Chrome mà phần lớn người dùng vẫn thấy.
- Trình duyệt macOS
- Ba nút đèn của cửa sổ và ô địa chỉ ở giữa, gần giống thanh tiêu đề kiểu Safari.
- Trình duyệt Windows
- Ô địa chỉ bên trái, các nút thu nhỏ, phóng to và đóng bên phải.
- Cửa sổ macOS
- Nút đèn và tiêu đề tùy chọn, không có thanh địa chỉ: dành cho ứng dụng máy tính hoặc khi không muốn lộ URL.
- Cửa sổ Windows
- Thanh tiêu đề đơn giản với các nút thu nhỏ, phóng to và đóng bên phải: dành cho ứng dụng Windows, không có URL.
Hỏi đáp
Hỏi đáp về mockup website
Mockup website là gì?
Là ảnh chụp một trang web được đặt vào khung trình duyệt, có thanh địa chỉ, tab và nút cửa sổ, để người xem nhận ra ngay đó là một trang web hay web app. Mockup hay được dùng trên landing page, bài ra mắt sản phẩm và tài liệu hướng dẫn.
Công cụ tạo mockup này có miễn phí không?
Có. Miễn phí, không cần tài khoản, không đóng dấu và không giới hạn số mockup. Mọi thứ chạy hoàn toàn trong trình duyệt của bạn.
Ảnh chụp màn hình của tôi có bị tải lên đâu không?
Không. Ảnh được đọc từ máy bạn và vẽ lên một canvas trong trang này. Ảnh không được gửi lên máy chủ và không được lưu lại, nên màn hình sản phẩm chưa công bố vẫn kín đáo.
Đổi được URL và tiêu đề tab không?
Được. Gõ địa chỉ bất kỳ vào ô Địa chỉ và chữ bất kỳ vào ô Tiêu đề tab (khung Chrome). Chúng được vẽ thẳng vào khung, nên bạn có thể hiện trang staging dưới tên miền chính thức hoặc một đường dẫn ngắn gọn.
Có xuất PNG nền trong suốt được không?
Được. Đặt Nền là Không rồi xuất PNG hoặc WebP: phần quanh cửa sổ và các góc bo vẫn trong suốt. JPEG không có độ trong suốt nên phần đó sẽ thành màu trắng.
Ảnh chụp ở chế độ tối có dùng được không?
Được. Đặt giao diện khung là Tự động, công cụ đọc phần trên cùng của ảnh và chọn khung sáng hoặc tối cho khớp. Bạn cũng có thể chọn hẳn Sáng hoặc Tối.
Làm sao để dữ liệu khách hàng không lọt vào mockup?
Làm mờ ngay trên trang trước khi chụp. Tiện ích Chrome Blurr.ing làm mờ mọi tên, email hay con số trên trang web, rồi phím tắt chụp màn hình của tiện ích chụp lại với các vùng mờ đã nằm sẵn trong ảnh, kèm cả khung cửa sổ trình duyệt. Gói miễn phí có 5 lần chụp.