Tidak suka iklan? Pergi Bebas Iklan Hari ini 

Generator Filter CSS

WarnaPengembang

IKLAN · HAPUS?

MEMASUKKAN

Proses Otomatis

KELUARAN

Sisi klien

Pratinjau Langsung

Seret & lepas gambar di sini, atau klik untuk memilih

Preset

Tidak ada

Vintage

Dramatis

Dingin

Hangat

Nada Sepia

Kontras Tinggi

Noir

Melamun

Pudar

Kode CSS

IKLAN · HAPUS?

Memandu

Generator Filter CSS

Generator Filter CSS memungkinkan Anda membuat efek filter CSS secara visual dengan pratinjau gambar langsung. Sesuaikan properti filter individual menggunakan penggeser intuitif dan lihat hasilnya secara instan — tanpa perlu menebak. Setelah Anda puas dengan tampilannya, salin kode CSS yang dihasilkan dan tempelkan langsung ke stylesheet Anda.

Cara Penggunaan

Mulai dengan gambar sampel default atau unggah gambar Anda sendiri dengan menyeret dan melepas gambar ke area pratinjau atau mengklik "Unggah Gambar". Kemudian sesuaikan penggeser filter untuk mencapai efek yang diinginkan. Setiap penggeser mengontrol properti filter CSS yang berbeda — buram, kecerahan, kontras, skala abu-abu, putar hue, balik, opasitas, saturasi, dan sepia. Anda juga dapat mengaktifkan bayangan jatuh dengan offset, buram, dan warna yang dapat dikonfigurasi. Coba salah satu preset bawaan seperti Vintage, Dramatis, atau Noir untuk titik awal yang cepat. Ketika Anda sudah puas, klik tombol Salin untuk mendapatkan kode CSS.

Fitur

Pratinjau Gambar Langsung – Lihat perubahan filter diterapkan pada gambar Anda secara real-time saat Anda menggerakkan penggeser
10 Properti Filter – Kontrol penuh atas buram, kecerahan, kontras, skala abu-abu, putar hue, balik, opasitas, saturasi, sepia, dan bayangan jatuh
Efek Preset – Preset sekali klik termasuk Vintage, Dramatis, Sejuk, Hangat, Nada Sepia, Kontras Tinggi, Noir, Melamun, dan Pudar
Unggah Gambar – Unggah gambar Anda sendiri melalui seret-dan-lepas atau pemilih file untuk mempratinjau filter pada konten asli
Awalan Vendor – CSS yang dihasilkan menyertakan -webkit-filter untuk kompatibilitas browser maksimum
Kontrol Bayangan Jatuh – Sesuaikan bayangan jatuh dengan offset X/Y, radius buram, dan pemilih warna
Salin Sekali Klik – Salin kode filter CSS yang dihasilkan secara instan ke clipboard Anda
Tombol Atur ulang – Kembalikan semua penggeser ke nilai defaultnya dengan cepat

IKLAN · HAPUS?

 Tanya Jawab Umum

Apa itu properti filter CSS dan bagaimana cara kerjanya?

Properti filter CSS menerapkan efek grafis seperti buram atau pergeseran warna ke rendering elemen. Ini menggunakan fungsi filter (blur(), brightness(), contrast(), dll.) yang memproses piksel elemen sebelum menampilkannya. Beberapa filter dapat dirangkai bersama dalam satu deklarasi, dan mereka diterapkan dalam urutan yang tercantum.
Apakah filter CSS memengaruhi kinerja halaman?

Filter CSS dipercepat GPU di browser modern, jadi filter sederhana seperti kecerahan atau kontras memiliki dampak kinerja minimal. Namun, filter kompleks seperti buram dengan nilai radius besar atau filter yang diterapkan ke banyak elemen secara bersamaan dapat menyebabkan penurunan frame rate, terutama pada perangkat seluler. Untuk kinerja terbaik, terapkan filter ke sesedikit elemen yang diperlukan dan hindari menganimasikan buram pada area yang luas.
Apa perbedaan antara filter dan backdrop-filter di CSS?

Properti filter menerapkan efek ke elemen itu sendiri dan isinya, sedangkan backdrop-filter menerapkan efek ke area di belakang elemen. Misalnya, backdrop-filter: blur(10px) menciptakan efek kaca buram dengan mengaburkan apa pun yang terlihat melalui latar belakang elemen, tanpa memengaruhi konten elemen itu sendiri.
Browser mana yang mendukung filter CSS?

Filter CSS didukung di semua browser modern termasuk Chrome, Firefox, Safari, Edge, dan Opera. Safari masih memerlukan awalan -webkit- untuk beberapa fungsi filter. Internet Explorer sama sekali tidak mendukung filter CSS. Untuk kompatibilitas maksimum, sertakan deklarasi -webkit-filter dan filter standar dalam CSS Anda.