Cara menggunakan Masker Bentuk Gambar
- Pilih bentuk — sama dengan bentuk di generator clip-path, ditambah bentuk hati.
- Naikkan Feather untuk tepi lembut, atau biarkan di 0 untuk potongan tegas.
- Ubah Ukuran untuk memperkecil bentuk di dalam elemen, dan coba Gunakan gambar saya.
- Salin CSS-nya — bentuknya berupa SVG inline, jadi tidak perlu file tambahan.
Masker bentuk vs. clip-path
clip-path memotong bentuk dengan tepi tegas dan merupakan pilihan paling sederhana jika kamu membutuhkan tepi keras. Masker bentuk menggunakan SVG sebagai mask-image: bisa memiliki tepi lembut yang memudar, dapat diubah ukurannya dengan mask-size dan diposisikan dengan mask-position, serta bekerja dengan bentuk SVG apa pun — bahkan logo milikmu sendiri (pilih “Gambar atau SVG saya sebagai mask”).
Untuk bentuk bertepi tegas dengan titik yang bisa digeser, gunakan Generator Clip-path; untuk bentuk organik, gunakan Generator SVG Blob.
Juga dicari sebagai: css bentuk gambar, mask image dengan bentuk css, gambar bentuk hati css, gambar bentuk bintang css, gambar heksagon css, potong bentuk css, css mask svg bentuk.
Tool yang cocok dipakai bersama Masker Bentuk Gambar
- Generator CSS Mask — Buat gambar dan bagian halaman memudar perlahan alih-alih berakhir tegas: pudarkan satu tepi, atas dan bawah, keempat tepi, vignette radial atau spotlight, atau potong elemen menjadi garis-garis.
- Fade Tepi Gambar CSS — Beri foto dan gambar hero tepi lembut yang memudar hanya dengan satu aturan CSS — tanpa edit gambar.
- Generator Border Radius — Bulatkan sudut kotak mana pun: geser satu slider untuk semua sudut atau atur tiap sudut secara terpisah, beralih ke sudut elips untuk bentuk blob dan daun, lalu salin CSS border-radius terpendek yang valid.
- Generator Segitiga CSS — Buat segitiga murni CSS untuk panah tooltip, caret dropdown, atau balon ucapan: pilih salah satu dari 8 arah, atur lebar, tinggi, dan warnanya, lalu salin trik border klasik atau versi clip-path yang lebih sederhana.
Pertanyaan yang sering diajukan
Bagaimana cara memasukkan gambar ke dalam bentuk hati atau bintang?
Pilih bentuknya di sini lalu salin CSS-nya: CSS tersebut menetapkan SVG inline dari bentuk itu sebagai mask-image pada gambarmu, sehingga hanya bagian dalam bentuk yang terlihat.
Apakah bentuknya bisa memiliki tepi lembut?
Bisa — naikkan Feather. Bentuk SVG akan diburamkan sehingga gambar memudar di tepinya. clip-path tidak bisa melakukan ini; ia selalu memotong dengan tepi tegas.
Bisakah saya memakai bentuk atau logo sendiri?
Bisa — pilih “Gambar atau SVG saya sebagai mask” lalu unggah PNG dengan transparansi atau SVG.
Bisakah saya memasang Masker Bentuk Gambar sebagai aplikasi web dan memakainya offline?
Bisa. Masker Bentuk Gambar adalah aplikasi web (PWA) yang bisa dipasang. Pemasangannya lewat browser kamu, bukan diunduh dari toko aplikasi. Klik Pasang aplikasi di bagian atas halaman ini di Chrome atau Edge (Windows, macOS, Linux, ChromeOS) atau di Android. Di iPhone dan iPad, gunakan Bagikan → Tambahkan ke Layar Utama, dan di Safari 17+ pada Mac, gunakan File → Tambahkan ke Dock. Setelah itu, aplikasi akan terbuka di jendelanya sendiri dengan ikonnya sendiri. Karena berjalan sepenuhnya di browser kamu, aplikasi ini tetap bisa dipakai offline. Firefox di desktop tidak bisa memasang aplikasi web. Cara memasang aplikasi.