Cara menggunakan Generator Vignette CSS
- Pratinjau dimulai dengan vignette radial. Pilih elips (mengikuti bentuk gambar) atau lingkaran.
- Atur Area solid (bagian tengah yang terlihat penuh) dan Fade berakhir di (titik di mana sudah sepenuhnya transparan).
- Gunakan Spotlight untuk menggeser area yang terlihat dari tengah.
- Salin CSS-nya.
Vignette dengan mask-image
.vignette {
-webkit-mask-image: radial-gradient(ellipse at center, #000 40%, transparent 75%);
mask-image: radial-gradient(ellipse at center, #000 40%, transparent 75%);
}Bagian tengah tetap terlihat penuh sampai stop pertama, lalu memudar menjadi transparan di stop kedua. Berbeda dengan overlay gelap, vignette berbasis mask memudarkan gambar ke latar halaman yang sebenarnya, sehingga cocok untuk warna apa pun. Untuk fade lurus, lihat Fade Tepi Gambar dengan CSS.
Juga dicari sebagai: css vignette, efek vignette css, css radial fade, radial gradient mask, generator vignette, vignette gambar css, fade lingkaran gambar css.
Tool yang cocok dipakai bersama Generator Vignette CSS
- 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.
- Masker Bentuk Gambar — Masukkan foto apa pun ke dalam bentuk — bintang, hati, heksagon, lingkaran, panah, balon chat… — menggunakan mask-image CSS.
- 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 CSS Filter — Atur blur, brightness, contrast, saturation, hue, grayscale, sepia, invert dan drop shadow pada contoh atau gambarmu sendiri, lalu salin CSS filter-nya.
Pertanyaan yang sering diajukan
Bagaimana cara menambahkan vignette ke gambar di CSS?
Terapkan mask radial-gradient: mask-image: radial-gradient(ellipse at center, #000 40%, transparent 75%). Atur dua stop tersebut untuk mengubah ukuran dan kelembutannya.
Bagaimana cara membuat vignette gelap, bukan yang transparan?
Letakkan gambar di atas latar hitam — mask akan memudarkannya ke warna hitam — atau gunakan overlay radial-gradient dengan box-shadow: inset.
Elips atau lingkaran?
Elips mengikuti proporsi gambar sehingga semua tepi memudar merata; lingkaran memberi efek sorotan bulat di bagian tengah.
Bisakah saya memasang Generator Vignette CSS sebagai aplikasi web dan memakainya offline?
Bisa. Generator Vignette CSS 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.