Mockup browser dari screenshot dengan URL dan judul tab Anda

Buat mockup browser dari screenshot produk Anda: pasang di bingkai browser Chrome, macOS, atau Windows dengan URL dan judul tab sendiri, lalu ekspor untuk landing page, posting peluncuran, atau dokumentasi. Tampilan yang belum dirilis tidak pernah diunggah.

URL dan judul tab Anda
Tidak diunggah
Tanpa watermark

Mockup browser

Memuat contoh

Screenshot contoh· letakkan, atau tempel dengan CtrlV

Hasil 0 × 0 px· tetap di perangkat ini

Tempel CtrlVUnduh CtrlS

Tetap di perangkat Anda. File Anda diproses di tab browser ini. Tidak ada yang diunggah, disimpan, atau dikirim.

Diperbarui Oktober 2026

Jawaban singkat

Untuk membuat mockup browser, letakkan screenshot di alat di atas, pilih bingkai browser, lalu ketik URL yang Anda inginkan di bilah alamatnya. Tambahkan background dan padding jika mockup akan diletakkan di halaman yang ramai, pilih ukuran seperti 16:9 untuk postingan media sosial, lalu unduh PNG. Atur background ke Tanpa untuk mockup transparan yang bisa diletakkan di atas warna apa pun.

Sembunyikan data pribadi sebelum membuat mockup

Produk asli, tanpa data pelanggan asli di gambar

Screenshot produk terbaik diambil dari aplikasi aslinya, yang penuh dengan nama, email, dan angka omzet sungguhan. Ekstensi Chrome Blurr.ing memburamkan semua itu di halaman yang sedang terbuka, lalu pintasan screenshot-nya mengambil gambar dengan blur yang sudah menyatu di piksel dan menyediakan bingkai jendela browser, background, padding, dan sudut untuk hasilnya.

Membuat blur di halaman gratis dan tanpa batas.
Paket gratis termasuk 5 screenshot; Premium menghapus batasnya.
Gambar dibuat di browser Anda dan tidak pernah diunggah.

Tambahkan ke Chrome

Gratis diinstal, untuk Chrome di komputer.

mail.postbox.app/inbox/depositweb.chatly.app/annanorthbank.com/accounts

Sarah KimDeposit for the new flat

Dr. Patel’s officeYour results are ready

Parcel deliveryArriving today, 2 to 4 pm

MomPhotos from Sunday

Deposit for the new flat

Sarah Kimto me · 9:41

Hi! Here are my bank details for the deposit:

NameSarah Kim

IBANGB29 NWBK 6016 1331 9268 19

BICNWBKGB2L

0 × 0

The keys are at my new place, 14 Willow Lane, Flat 3B.

See you on Saturday!

PDF

Tenancy agreement.pdf214 KB

AnnaDoor code?

LeoSee you at 7

MiaHaha yes

TomThanks!

Anna Weber+1 415 555 0132

The view from our new flat!

Wow! What’s the door code again?

It’s 4721, then the 2nd floor

Good morning, EmmaEveryday account

4532 7781 0045 4417

EMMA ROSSI08/29

Available balance$8,240.15

Rent · June−$1,450.00

Salary+$3,920.00

Groceries−$86.40

Gym−$39.00

Drag to capture an area

0 × 0

Blurr.ing

Background

Color

NoneSolidGradient

PatternNone

FrameReset

SizeAuto

Padding88px

Corners16px

Shadow60%

Border0px

WindowNone

Blur areasSave PNGCopy image

Aman dibagikan

Gambar kotak di atas apa pun yang ingin disembunyikanGambar kotak di atas apa pun

Atau pilih teks, dan hanya teks itu yang buramAtau pilih teksnya saja

Atau klik sebuah elemen, dan elemen itu hilangAtau klik sebuah elemen

Auto Blur menyembunyikan semua gambar, video, dan iklanAuto Blur sembunyikan gambar

34 preset menangkap nomor kartu dan nominal34 preset tangkap nomor kartu

Tab Privacy menyamarkan judul dan ikon tab AndaTab Privacy samarkan judul tab

Screenshot bagian mana pun, blur sudah ada di gambarScreenshot, blur ikut terbawa

Tidak ada data pribadi yang bocor, halaman aman dibagikanTidak ada yang bocor, aman

Background screenshotGradasi, padding, sudut, dan bayangan untuk screenshot apa pun, tanpa perlu bingkai. Tanda panah di screenshotTambahkan panah, kotak, tulisan, dan stabilo sebelum diberi bingkai. Sensor foto onlineTutup data pribadi di screenshot yang sudah diambil dengan kotak hitam, blur, atau pikselasi.

Cara kerjanya

Cara membuat mockup browser

Empat langkah, sekitar satu menit, tanpa aplikasi desain.

1
Tambahkan screenshot

Seret screenshot produk Anda ke pratinjau, tempel dengan Ctrl+V (Cmd+V di Mac), atau tekan Pilih gambar. Sampai Anda melakukannya, halaman contoh yang ditampilkan.
2
Pilih bingkai browser

Pilih Chrome di macOS atau Windows, bilah browser macOS atau Windows, jendela macOS atau Windows polos, atau tanpa bingkai. Atur tema ke terang, gelap, atau otomatis agar cocok dengan bagian atas screenshot Anda.
3
Tulis URL dan judul tab

Ketik alamat yang Anda inginkan di bilah alamat, misalnya produkanda.com/harga, dan judul tab untuk bingkai Chrome. URL-nya tidak harus nyata atau aktif.
4
Atur kanvas lalu ekspor

Tambahkan background, padding, sudut, dan bayangan, pilih ukuran seperti 16:9 atau 1:1, lalu unduh PNG, JPEG, atau WebP dalam resolusi penuh, atau salin ke clipboard.

Kapan berguna

Visual produk yang langsung terlihat sebagai aplikasi web

Screenshot polos hanyalah potongan tampilan. Screenshot yang sama di dalam bingkai browser langsung menunjukkan di mana produk itu berjalan dan produk macam apa itu.

Hero landing page

Screenshot di dalam bingkai browser langsung terbaca sebagai aplikasi web. Pakai background transparan (PNG atau WebP) agar bisa diletakkan di atas warna section apa pun.

Posting peluncuran dan galeri

Galeri Product Hunt, tweet peluncuran, dan catatan rilis menampilkan produk lebih baik dalam konteks daripada potongan polos. Pilih 16:9 atau 1.91:1 agar bingkainya tidak terpotong di pratinjau.

Dokumentasi dan artikel bantuan

Bingkai browser dengan path asli di bilah alamat memberi tahu pembaca di halaman mana sebuah langkah dilakukan, sesuatu yang tidak bisa ditunjukkan oleh potongan panel.

Media sosial dan slide

Ukuran untuk X, LinkedIn, postingan dan potret Instagram, story, dan Dribbble melebarkan kanvas mengikuti rasio tanpa memotong screenshot Anda.

Pilihan bingkai

Enam bingkai browser dan jendela

Masing-masing digambar sebagai bentuk datar pada resolusi screenshot Anda, terang atau gelap, jadi tetap tajam pada tangkapan layar Retina.

Chrome di macOS: Deretan tab dengan tiga lampu jendela dan satu tab (favicon, judul, tombol tutup) di atas toolbar dengan tombol kembali, maju, muat ulang, dan bilah alamat. Bingkai yang paling mudah dikenali sebagai aplikasi web.
Chrome di Windows: Deretan tab dan toolbar yang sama, dengan tombol minimalkan, maksimalkan, dan tutup di ujung kanan deretan tab, persis seperti Chrome yang dilihat kebanyakan pengguna.
Browser macOS: Tiga lampu jendela dengan kolom alamat di tengah, mirip bilah judul gaya Safari.
Browser Windows: Kolom alamat di kiri, serta ikon minimalkan, maksimalkan, dan tutup di kanan.
Jendela macOS: Lampu jendela dan judul opsional, tanpa bilah alamat: untuk aplikasi desktop atau saat URL tidak perlu terlihat.
Jendela Windows: Bilah judul polos dengan tombol minimalkan, maksimalkan, dan tutup di kanan: untuk aplikasi Windows, tanpa URL.

Tanya jawab

Mockup browser: pertanyaan yang sering diajukan

Bagaimana cara membuat mockup website dari screenshot?

Ambil screenshot halaman website Anda, letakkan di alat di atas, pilih bingkai browser (misalnya Chrome dengan tab), ketik URL dan judul tabnya, lalu tambahkan background dan unduh sebagai PNG. Tidak perlu aplikasi desain.

Bisa ekspor PNG transparan?

Bisa. Atur Background ke Tanpa lalu ekspor sebagai PNG atau WebP: area di sekitar jendela dan sudut membulatnya tetap transparan. JPEG tidak mendukung transparansi, jadi area itu menjadi putih.

Apakah ada watermark?

Tidak. Gratis, tanpa akun, tanpa watermark, dan tanpa batas jumlah mockup. Semuanya berjalan di browser Anda.

Apa bedanya mockup browser dan mockup website di Figma?

Mockup website di Figma biasanya berarti merancang tampilan dari nol, sebelum websitenya dibuat. Mockup browser di sini memakai screenshot dari website yang sudah ada dan memasangnya di bingkai browser, untuk presentasi, posting, atau dokumentasi.

Bisa mengganti URL dan judul tab?

Bisa. Ketik alamat apa pun di kolom Alamat dan teks apa pun di Judul tab (bingkai Chrome). Keduanya digambar ke dalam bingkai, jadi Anda bisa menampilkan halaman staging dengan domain produksi atau path yang pendek dan rapi.

Apakah screenshot saya diunggah?

Tidak. Gambar dibaca dari perangkat Anda dan digambar ke canvas di halaman ini. Gambar tidak pernah dikirim ke server dan tidak disimpan, jadi tampilan produk yang belum dirilis tetap rahasia.

Bisa untuk screenshot mode gelap?

Bisa. Jika tema bingkai diatur ke Otomatis, alat ini membaca bagian atas screenshot dan memilih bingkai terang atau gelap yang cocok. Anda juga bisa memilih Terang atau Gelap secara manual.

Bagaimana agar data pelanggan tidak ikut di mockup produk?

Buramkan di halaman yang sedang terbuka sebelum mengambil screenshot. Ekstensi Chrome Blurr.ing memburamkan nama, email, atau nomor apa pun di halaman web, lalu pintasan screenshot-nya mengambil gambar dengan blur yang sudah menyatu di piksel dan juga menyediakan bingkai jendela browser. Paket gratisnya termasuk 5 screenshot.