CSS Filter Generator

Atur efek kaya blur lan padhang nganggo slider, lan deleng kode filter CSS karo preview

Informasi pembaruanNambahaké Generator Filter CSS, ngatur kabur lan padhang kanggo ngasilakéDeleng informasi nganyari

Fitur

9 jinis efek nganggo slider

Saben digeser, preview lan kode CSS owah bebarengan

Bisa dicoba nganggo gambar dhewe

Gambar sing sampeyan duweni ditampilake ing browser kanggo mriksa efek

Gambar asli muncul mung nalika ditekan

Bandhingake gambar sadurunge lan sawise diwenehi efek sakala

Atur luwih rinci saka 8 conto

Atur miwiti saka conto kayata nuansa sepia utawa vintage

Cara Nggunakake

Pilih gambar

Pilih gambar dhewe liwat "Pilih gambar dhewe". Yen ora dipilih, bisa dicoba nganggo gambar conto sing wis ana

Atur efek

Pilih conto sing cedhak karo swasana sing diinginake, utawa atur kekuwatan efek liwat saben slider

Bandhingake sadurunge lan sawise

Gambar tanpa efek mung katon sajrone tombol "Bandhingake karo gambar asli" ditekan

Salin kode

Tekan tombol "Salin" kanggo nempelake baris filter menyang CSS sampeyan dhewe

Conto Panganggo

Kejelasan teks ing foto latar mburi

Blur sethithik foto latar mburi supaya judhul sing ditumpangake luwih gampang diwaca

Nyamakake warna foto

Nyamakake foto ing kaca tim utawa galeri dadi grayscale utawa sepia

Nemtokake angka nganggo foto dhewe

Nyoba foto sing bakal digunakake tenan kanggo nemtokake nilai muted utawa vintage

Ngatur gambar kanggo dark mode

Nemtokake nilai brightness lan contrast sing luwih endhek supaya ora mencorong ing latar mburi peteng

Pengetahuan Dhasar

Fungsi lan satuan ing filter

Properti filter ing CSS iku properti kanggo menehi efek marang tampilan gambar utawa elemen, ditulis kanthi nyusun fungsi kayata blur lan sepia dipisah nganggo spasi.

px (piksel)：Fungsi blur nemtokake radius blur nganggo px; yen diisi 4px, warna bakal nyampur ing radius 4 piksel.
% (persen)：Fungsi brightness lan fungsi sepia iku fungsi kanggo nemtokake kekuwatan efek nganggo %. Ing fungsi brightness, 100% iku padhang asli, lan 120% iku kahanan sing 20% luwih padhang.
deg (derajat)：Fungsi hue-rotate nemtokake sudhut muteran warna ing roda warna nganggo deg; yen diisi 180deg, warna bakal pindhah menyang hue sing kosok balen.

Kenapa urutan nulis ngowahi asile

Fungsi sing disusun ing filter ditrapake saka kiwa menyang tengen, lan efek sabanjure ditrapake ing asil efek sadurunge, dadi tampilane bisa beda yen urutane diganti. Contone, yen dadi grayscale dhisik banjur diwenehi sepia, warna coklate isih ana; nanging yen sepia dhisik banjur grayscale, warna coklate ilang. Ing alat iki urutan panerapane wis tetep, nanging sampeyan bisa ngganti urutan kasebut kanthi ngowahi kode CSS sing wis digawe.

Bedane karo backdrop-filter

filter lan backdrop-filter iku properti sing bisa nganggo fungsi padha, nanging bedo ing bagean sing diwenehi efek.

filter：filter iku properti kanggo menehi efek marang tampilan elemen sing ditemtokake dhewe (kayata gambar utawa teks).
backdrop-filter：backdrop-filter iku properti kanggo menehi efek marang bagean sing katon ing mburi elemen sing ditemtokake, lan biasane digunakake kanggo tampilan kaya kaca buram.