CSS Filter Generator

Nggawe lan nggambarake saringan gambar CSS khusus

Preview

CSS Code

saringan: ora ana;

Kontrol Filter

Blur 0px

Brightness 100%

Contrast 100%

Grayscale 0%

Hue Puter 0deg

Invert 0%

Opacity 100%

Saturate 100%

Sepia 0%

Filter-filter sing populer

Vintage

Neon Glow

Polaroid

Film Vintage

Seni Digital

Carane Gunakake Filter CSS

Apa Filter CSS?

Filter CSS ngidini sampeyan ngetrapake efek grafis kaya blur utawa owah-owahan warna menyang unsur. Biasane digunakake kanggo gambar, latar mburi, lan wates.

Filter-filter bisa digunakake kanggo nggawe efek visual, nambah gambar, utawa nggawe unsur desain unik tanpa perlu alat editing gambar eksternal.

Didhukung CSS Filter Properties

blur()- Aplikasi blur Gaussian kanggo unsur.
brightness()- Nyetel padhange unsur.
contrast()- Nyetel kontras saka unsur.
grayscale()- Ngonversi unsur menyang grayscale.
hue-rotate()- Aplikasi rotasi hue kanggo unsur.
invert()- Inverts werna saka unsur.
opacity()- Nyetel opacity saka unsur.
saturate()- Saturates utawa desaturates unsur.
sepia()- Ngonversi unsur menyang sepia.

Carane Aplikasi Filter

Nggunakake kode CSS sing digawe saka alat iki, sampeyan bisa ngetrapake saringan menyang unsur HTML apa wae. Mangkene carane:

1. Pilih Element

Pilih unsur HTML sing pengin ditrapake filter kasebut. Iki bisa dadi gambar, latar mburi, utawa unsur liyane.

2. Tambah Kelas utawa ID

Yen unsur durung duwe kelas utawa ID, nambah siji kanggo nggawe luwih gampang kanggo target karo CSS.

3. Aplikasi Filter

Gunakake CSSfilterproperti ing stylesheet utawa gaya inline kanggo ngetrapake filter sing digawe.

.filtered-image { filter: blur(5px) brightness(110%) contrast(120%); }

4. Gabungke Multiple Filter

Sampeyan bisa nggabungake macem-macem fungsi filter kanthi nyathet siji-sijine, dipisahake kanthi spasi.

filter: blur(2px) brightness(110%) contrast(120%) saturate(150%);

Kompatibilitas Browser

Filter CSS didhukung kanthi akeh ing browser modern, kalebu Chrome, Firefox, Safari, Edge, lan Opera. Nanging, browser lawas kaya Internet Explorer ora ndhukung.

Chrome Firefox Safari Edge IE 11+ (partial)

Related Tools

Konverter SCSS menyang CSS

Ganti kode SCSS sampeyan dadi CSS. Cepet, gampang, lan aman.

Nggawe Transformasi CSS3 kanthi Gampang

Alat sing kuat lan intuisi kanggo nggawe transformasi CSS3 sing kompleks tanpa nulis kode. Visualisasi owah-owahan ing wektu nyata lan salin CSS sing digawe kanggo digunakake ing proyek sampeyan.

Nggawe Layouts Flexbox Sampurna

Visualisasi, ngatur, lan ngasilake kode flexbox CSS nganggo antarmuka seret lan selehake intuisi.

Ngonversi JSON menyang TSV kanthi gampang

Ganti data JSON menyang format Tab-Separated Values (TSV) kanthi siji klik. Cepet, aman, lan adhedhasar browser.

Alat Encode Base64

Encode teks menyang format Base64 kanthi gampang ing browser sampeyan.

HSV kanggo RGB

Ngonversi kode warna HSV dadi nilai RGB kanggo pangembangan web