Apa itu Generator Filter CSS?

Generator Filter CSS adalah alat visual yang membantu Anda membuat dan menggabungkan efek filter CSS dengan pratinjau gambar langsung. Alih-alih menulis properti filter CSS secara manual dan menebak nilainya, Anda dapat menyesuaikan setiap filter secara visual dan melihat hasilnya secara instan pada gambar nyata.

Properti Filter CSS

Properti CSS filter menerapkan efek grafis seperti blur, penyesuaian brightness, contrast, dan transformasi warna pada elemen. Ini biasanya digunakan untuk efek gambar, status hover, dan desain UI kreatif.

Dukungan Browser: Filter CSS didukung di semua browser modern dengan cakupan global lebih dari 97% termasuk Chrome, Firefox, Safari, dan Edge.

Fungsi Filter yang Didukung

Alat ini mendukung semua 9 fungsi filter CSS standar:

blur()

Menerapkan efek blur Gaussian pada elemen

brightness()

Membuat elemen lebih terang atau lebih gelap

contrast()

Menyesuaikan tingkat kontras

grayscale()

Mengonversi ke grayscale (hitam dan putih)

hue-rotate()

Memutar hue warna dengan sudut tertentu

invert()

Membalikkan warna

opacity()

Mengontrol tingkat transparansi

saturate()

Menyesuaikan saturasi warna

sepia()

Menerapkan nada vintage yang hangat dan kecoklatan

Table of Contents

1. Apa itu Generator Filter CSS?
- 1.1. Properti Filter CSS
- 1.2. Fungsi Filter yang Didukung
2. Cara Menggunakan
3. Fitur
4. Pertanyaan yang Sering Diajukan

Cara Menggunakan

Sesuaikan Filter

Gunakan slider di panel kanan untuk menyesuaikan setiap properti filter CSS. Anda juga dapat mengetik nilai pasti langsung ke input angka. Pratinjau gambar diperbarui secara real-time saat Anda membuat perubahan.

Gunakan Preset (Opsional)

Klik thumbnail preset apa pun untuk menerapkan kombinasi filter yang telah ditentukan secara instan. Preset yang tersedia mencakup Vintage, Noir, Warm, Cool, Dramatic, dan lainnya. Setelah menerapkan preset, Anda dapat terus menyempurnakan filter individual.

Aktifkan/Nonaktifkan Filter

Setiap filter memiliki kotak centang yang memungkinkan Anda mengaktifkan atau menonaktifkannya tanpa kehilangan nilainya saat ini. Ini berguna untuk membandingkan efek filter individual pada hasil keseluruhan.

Bandingkan Sebelum/Sesudah

Tahan tombol ikon mata untuk sementara menghapus semua filter dan melihat gambar asli. Lepaskan untuk kembali ke versi yang disaring.

Salin Kode CSS

Kode CSS yang dihasilkan ditampilkan di bawah pratinjau. Klik tombol Salin untuk menyalin properti filter lengkap ke clipboard Anda, siap untuk ditempel ke stylesheet Anda.

Pro Tip: Klik tombol unggah untuk menggunakan gambar Anda sendiri guna melihat pratinjau efek filter. Ini membantu Anda melihat dengan tepat bagaimana filter akan terlihat pada konten aktual Anda.

Fitur

9 Kontrol Filter CSS

Kontrol penuh atas semua fungsi filter CSS standar dengan slider intuitif dan input angka presisi.

Blur dalam piksel
Hue-rotate dalam derajat
Lainnya dalam persentase

Pratinjau Gambar Langsung

Lihat perubahan filter Anda diterapkan secara instan pada gambar nyata.

Pembaruan real-time
Tidak perlu menulis kode
Umpan balik visual instan

10 Preset Bawaan

Mulai dengan cepat dengan kombinasi filter yang dirancang secara profesional.

Vintage, Noir, Warm, Cool
Dramatic, Faded, Hi-Con
Dreamy, Invert, Original

Pengalihan Filter Individual

Aktifkan atau nonaktifkan filter apa pun secara independen menggunakan kotak centang.

Isolasi efek filter
Bandingkan kontribusi
Pertahankan nilai slider

Perbandingan Sebelum/Sesudah

Tahan tombol perbandingan untuk langsung melihat gambar asli tanpa filter.

Dukungan mouse dan sentuh
Pengalihan instan
Perbandingan mudah

Unggah Gambar Kustom

Unggah gambar Anda sendiri untuk melihat pratinjau filter pada konten nyata.

Dukungan JPG, PNG
Pemrosesan lokal
Uji pada konten aktual

Ekspor CSS Satu Klik

Kode CSS yang dihasilkan diperbarui secara langsung saat Anda menyesuaikan filter.

Salin dengan satu klik
Siap untuk ditempel
Properti filter lengkap

Data Anda Tetap Pribadi

Semua pemrosesan terjadi di browser Anda.

Tidak ada unggahan ke server
Tidak ada pelacakan
Privasi lengkap

Pertanyaan yang Sering Diajukan

Filter CSS apa yang didukung?

Alat ini mendukung semua 9 fungsi filter CSS standar: blur(), brightness(), contrast(), grayscale(), hue-rotate(), invert(), opacity(), saturate(), dan sepia().

Bisakah saya menggabungkan beberapa filter?

Ya. Anda dapat menyesuaikan beberapa filter secara bersamaan. Properti CSS filter mendukung penggabungan beberapa fungsi, dan alat ini menghasilkan output gabungan secara otomatis.

Apa yang dilakukan preset?

Preset adalah kombinasi filter yang telah ditentukan sebelumnya yang menciptakan efek visual populer. Misalnya, "Vintage" menerapkan sepia dan brightness/contrast yang disesuaikan untuk tampilan foto klasik. Anda dapat menggunakan preset sebagai titik awal dan kemudian menyesuaikan filter individual.

Apakah gambar yang saya unggah dikirim ke server?

Tidak. Semua pemrosesan gambar terjadi sepenuhnya di browser Anda menggunakan JavaScript. Gambar Anda tidak pernah diunggah ke server mana pun.

Browser apa yang mendukung filter CSS?

Filter CSS didukung di semua browser modern termasuk Chrome, Firefox, Safari, dan Edge. Mereka memiliki dukungan luas dengan cakupan browser global lebih dari 97%.

Bagaimana cara mengatur ulang semua filter?

Klik tombol Atur Ulang di panel preset untuk mengembalikan semua filter ke nilai default mereka (tidak ada efek yang diterapkan).

Bisakah saya mengaktifkan dan menonaktifkan filter individual?

Ya. Setiap filter memiliki kotak centang di sebelah namanya. Menghapus centangnya menonaktifkan filter spesifik itu sambil menyimpan nilainya, sehingga Anda dapat dengan mudah mengaktifkannya kembali nanti tanpa menyesuaikan slider lagi.