Generator Filter CSS

Sesuaikan efek seperti blur dan kecerahan dengan slider, lalu buat kode CSS filter sambil melihat pratinjau

Informasi pembaruanTambahkan CSS Filter Generator, buat dengan menyesuaikan blur dan kecerahanLihat Pembaruan

Fitur

9 jenis efek dengan slider

Pratinjau dan kode CSS berubah bersamaan setiap kali Anda menggerakkan slider

Coba dengan gambar Anda sendiri

Tampilkan gambar Anda di browser dan konfirmasi efeknya

Gambar asli hanya saat ditekan

Bandingkan sebelum dan sesudah efek diterapkan di tempat

Penyesuaian halus dari 8 contoh

Lakukan penyesuaian berdasarkan contoh seperti efek sepia atau vintage

Cara Menggunakan

Pilih gambar

Tentukan gambar Anda di "Pilih gambar Anda sendiri". Jika tidak dipilih, Anda dapat mencoba dengan gambar contoh bawaan

Sesuaikan efek

Pilih suasana yang mirip dari contoh atau sesuaikan kekuatan efek dengan slider masing-masing

Bandingkan sebelum dan sesudah

Tekan "Bandingkan dengan gambar asli" untuk menampilkan gambar tanpa efek hanya saat tombol ditekan

Salin kode

Gunakan tombol "Salin" untuk menyalin satu baris filter ke CSS Anda sendiri

Kasus Penggunaan

Keterbacaan teks di atas foto latar

Buram foto latar sedikit untuk membuat judul di atasnya lebih mudah dibaca

Menyeragamkan warna foto

Seragamkan foto di halaman tim atau galeri menjadi hitam putih atau sepia

Menentukan nilai dengan foto pribadi

Terapkan ke foto yang benar-benar akan digunakan untuk menentukan nilai efek kusam atau vintage

Penyesuaian gambar untuk mode gelap

Tentukan nilai dengan kecerahan dan kontras yang dikurangi sehingga tidak terlalu terang di latar belakang gelap

Pengetahuan Dasar

Fungsi dan satuan filter

Properti filter CSS adalah properti yang menerapkan efek pada tampilan gambar atau elemen, dengan fungsi seperti blur dan sepia dipisahkan oleh spasi dan ditulis bersama.

px (piksel)：Fungsi blur adalah fungsi yang menentukan jari-jari blur dalam px, dan ketika Anda menentukan 4px, warna akan menyatu di kisaran radius 4 piksel.
% (persen)：Fungsi brightness dan sepia adalah fungsi yang menentukan intensitas efek dengan %, dan dalam fungsi brightness, 100% adalah kecerahan asli dan 120% adalah 20% lebih terang.
deg (derajat)：Fungsi hue-rotate adalah fungsi yang menentukan sudut untuk memutar warna pada roda warna dalam deg, dan ketika Anda menentukan 180deg, warna bergeser ke warna hue di sisi berlawanan.

Mengapa hasilnya berubah tergantung urutan penulisan

Fungsi yang diatur dalam filter diterapkan dari kiri ke kanan, dan efek berikutnya diterapkan ke hasil efek sebelumnya, sehingga mengubah urutan penyusunan dapat mengubah tampilan. Misalnya, jika Anda menerapkan efek sepia setelah membuat hitam putih, warna cokelat tetap ada, tetapi jika Anda menerapkan sepia terlebih dahulu kemudian membuat hitam putih, warna cokelat hilang. Dalam alat ini, urutan penerapan diperbaiki, tetapi Anda dapat mengubah urutan dengan mengedit kode CSS yang dihasilkan.

Perbedaan dengan backdrop-filter

Filter dan backdrop-filter adalah properti yang dapat menggunakan fungsi yang sama, tetapi target efek berbeda.

filter：Filter adalah properti yang menerapkan efek pada tampilan elemen yang ditentukan (seperti gambar atau teks).
backdrop-filter：Backdrop-filter adalah properti yang menerapkan efek pada bagian yang terlihat di belakang elemen yang ditentukan, dan digunakan untuk ekspresi seperti kaca buram.