Cara menggunakan Generator CSS Mask
- Pilih efek: pudarkan satu tepi, atas dan bawah, semua tepi, vignette, spotlight, atau garis.
- Atur ukuran fade, arah, posisi, atau lebar garis dengan slider.
- Coba langsung di gambarmu sendiri dengan Gunakan gambar saya.
- Salin CSS-nya — sudah termasuk
-webkit-mask-image, yang masih dibutuhkan Chrome, Edge, dan Safari untuk beberapa properti.
Cara kerja CSS mask
mask-image menggunakan gambar atau gradien sebagai stensil: di area mask yang buram, elemen terlihat; di area yang transparan, elemen menghilang; dan di antaranya elemen memudar. Gradien paling berguna untuk mask karena tidak membutuhkan file tambahan:
.hero {
-webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent);
mask-image: linear-gradient(to bottom, #000 70%, transparent);
}- Memudarkan semua tepi membutuhkan dua gradien yang digabung dengan
mask-composite: intersect(dan-webkit-mask-composite: source-in), yang sudah ditambahkan otomatis oleh generator. - Mask tidak mengubah tata letak maupun area klik — bagian yang memudar tetap bisa diklik.
- Berbeda dengan
opacity, mask bisa memudarkan sebagian elemen saja; berbeda dengan gradien overlay, mask menampilkan latar belakang yang sebenarnya.
Mask bentuk vs. clip-path
Efek Bentuk mengubah bentuk clip-path menjadi SVG inline yang dipakai sebagai mask-image. Hasilnya mirip clip-path, tetapi tepinya bisa dibuat berbulu (feathered), dan bentuknya bisa diskalakan dengan mask-size serta diulang dengan mask-repeat.
Untuk memotong bentuk dengan tepi tegas, gunakan Generator Clip-path. Untuk efek warna, gunakan Generator CSS Filter.
Juga dicari sebagai: mask-image generator, fade tepi gambar css, css gradient mask, fade out gambar css, css vignette, mask image linear gradient, webkit mask image, cara membuat fade tepi css.
Tool yang cocok dipakai bersama Generator CSS Mask
- Generator Gradient CSS — Rancang gradient secara visual — geser titik warna, ubah sudut atau jenisnya, mulai dari preset — lalu salin CSS siap pakai dengan warna solid sebagai fallback.
- Generator Wave SVG — Rancang pemisah bagian bergelombang untuk landing page: tambah atau hapus gelombang (hingga 6, masing-masing dengan warna, opasitas, dan bentuk sendiri), atur jumlah puncak, tinggi, dan kehalusan, pilih warna, serta tentukan apakah gelombang berada di atas atau bawah.
- 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 Glassmorphism — Desain kartu kaca buram dengan slider langsung dan salin CSS lintas browser, lengkap dengan prefix -webkit-backdrop-filter dan fallback untuk browser lama.
Pertanyaan yang sering diajukan
Bagaimana cara memudarkan tepi gambar dengan CSS?
Pasang gradien mask: mask-image: linear-gradient(to bottom, #000 70%, transparent) akan memudarkan bagian bawah. Untuk memudarkan semua tepi, gabungkan gradien horizontal dan vertikal dengan mask-composite: intersect — pilih “Fade all edges” di sini.
Apakah saya masih perlu -webkit-mask-image?
Ya, untuk dukungan terbaik. Browser berbasis Chromium dan Safari masih mengandalkan versi -webkit- untuk beberapa properti mask, jadi generator ini menghasilkan keduanya.
Apa perbedaan mask-image dan clip-path?
clip-path memotong bentuk dengan tepi tegas; mask-image bisa memudar secara bertahap dengan menggunakan gradien atau gambar sebagai stensil.
Bagaimana cara memberi tepi lembut pada bentuk clip-path?
clip-path selalu menghasilkan tepi tegas. Pilih efek Bentuk di sini: bentuk yang sama akan menjadi mask SVG, dan slider Feather akan mengaburkan tepinya sehingga gambar memudar dengan halus.
Bisakah saya memakai gambar atau SVG sebagai mask?
Bisa — pilih “My image or SVG as the mask” lalu unggah PNG dengan transparansi atau SVG. Bagian yang buram akan menampilkan elemen, dan bagian yang transparan akan menyembunyikannya. Atur ukuran, pengulangan, dan posisi mask, lalu salin CSS-nya dan arahkan url() ke file kamu.
Bisakah saya memasang Generator CSS Mask sebagai aplikasi web dan memakainya offline?
Bisa. Generator CSS Mask 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.