CSS Filter Generator
CSS Filter Generator memungkinkan Anda menyusun dan menggabungkan efek filter CSS secara visual, lengkap dengan pratinjau gambar langsung sehingga Anda tidak perlu menebak-nebak nilainya. Atur blur, brightness, contrast, warna, dan lainnya, lalu salin properti filter yang tepat langsung ke stylesheet Anda.
Alat ini dibuat untuk developer front-end dan desainer yang ingin menyetel efek gambar dan hover tanpa harus berulang kali edit-simpan-muat ulang. Setiap fungsi filter standar punya penggeser dan kolom angka sendiri, dan sepuluh preset siap pakai memberi Anda tampilan rapi sebagai titik awal.
Cara Menggunakan CSS Filter Generator
Atur filter
Geser penggeser mana pun untuk mengubah sebuah filter, atau ketik angka persis di kolom angkanya. Pratinjau gambar dan kode CSS yang dihasilkan keduanya diperbarui secara real-time sambil Anda menyesuaikan.
Mulai dari preset (opsional)
Klik thumbnail preset — seperti Vintage, Noir, atau Dramatis — untuk menerapkan tampilan siap pakai, lalu sempurnakan tiap filter dari sana.
Aktifkan dan bandingkan
Gunakan kotak centang tiap filter untuk mengaktifkan atau menonaktifkannya tanpa kehilangan nilainya, dan tahan tombol mata untuk mengintip gambar asli tanpa filter.
Salin CSS-nya
Properti filter lengkap muncul di bawah pratinjau. Klik Salin untuk mengirimnya ke clipboard Anda, siap ditempel ke stylesheet Anda.
Fitur
Sembilan Kontrol Filter
Kendali penuh atas blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate, dan sepia, masing-masing dengan penggeser dan kolom angka sendiri.
Pratinjau Gambar Langsung
Lihat setiap perubahan diterapkan seketika pada gambar nyata, tanpa perlu menulis kode, menyimpan, lalu memuat ulang.
Sepuluh Preset Bawaan
Mulai dari Asli, Vintage, Noir, Hangat, Dingin, Dramatis, Pudar, Kontras Tinggi, Lembut, atau Inversi — masing-masing ditampilkan sebagai pratinjau thumbnail.
Aktif/Nonaktif Tiap Filter
Aktifkan atau nonaktifkan filter mana pun dengan kotak centang untuk mengisolasi dan membandingkan efeknya, tanpa kehilangan nilai yang Anda atur.
Bandingkan Sebelum / Sesudah
Tahan tombol mata untuk melihat gambar asli, lalu lepas untuk kembali ke versi berfilter Anda. Berfungsi dengan mouse maupun sentuhan.
Unggah Gambar Sendiri
Muat gambar Anda sendiri untuk melihat filter pada konten nyata. Gambar dibaca lokal di peramban Anda dan tidak pernah diunggah.
Atur Ulang Satu Klik
Tombol Atur Ulang mengembalikan setiap filter ke nilai bawaannya sehingga Anda bisa memulai efek baru kapan saja.
Ekspor CSS Satu Klik
Properti filter yang dihasilkan diperbarui secara langsung dan tersalin ke clipboard Anda hanya dengan satu klik.
Mode Gelap & Responsif
Tema gelap bawaan dan tata letak responsif membuat alat ini nyaman digunakan di desktop maupun ponsel.
Pertanyaan yang Sering Diajukan
Filter CSS apa saja yang didukung generator ini?
Generator ini mencakup sembilan fungsi filter CSS standar: blur(), brightness(), contrast(), grayscale(), hue-rotate(), invert(), opacity(), saturate(), dan sepia().
Bagaimana cara menggabungkan beberapa filter CSS?
Atur sebanyak mungkin filter sekaligus sesuka Anda. Properti filter CSS mendukung perangkaian fungsi, dan alat ini otomatis menuliskannya dalam satu deklarasi filter gabungan.
Bagaimana cara membuat gambar blur dengan CSS?
Naikkan penggeser Blur, yang dipetakan ke filter: blur() dalam piksel (maksimal 20px di sini). Perhatikan pratinjaunya, lalu salin properti yang dihasilkan — misalnya filter: blur(4px);.
Bagaimana cara membuat gambar grayscale dengan CSS?
Setel penggeser Grayscale ke 100%, yang menghasilkan filter: grayscale(100%); untuk gambar hitam-putih penuh. Nilai di antaranya memberi desaturasi parsial. Preset Noir memadukan ini dengan peningkatan contrast.
Apa fungsi dari preset?
Preset adalah kombinasi filter yang sudah ditentukan untuk menciptakan tampilan populer. Vintage, misalnya, memadukan sepia dengan brightness, contrast, dan saturation yang disesuaikan. Terapkan satu sebagai titik awal, lalu sesuaikan tiap filter sesuai selera.
Apakah gambar yang saya unggah dikirim ke server?
Tidak. Saat Anda mengunggah gambar, gambar itu dibaca secara lokal dengan FileReader peramban Anda dan hanya ditampilkan di pratinjau. Gambar tidak pernah meninggalkan perangkat Anda dan tidak diunggah ke mana pun.
Bagaimana cara mengatur ulang semua filter?
Klik tombol Atur Ulang di panel preset untuk mengembalikan setiap filter ke nilai bawaannya, sehingga gambar tidak lagi terkena efek apa pun.
Peramban mana saja yang mendukung filter CSS?
Properti filter CSS berfungsi di semua peramban modern, termasuk Chrome, Firefox, Safari, dan Edge, jadi kode yang Anda salin di sini aman untuk dipakai produksi.
Belum ada komentar. Jadilah yang pertama berkomentar!