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

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.

Stylus kanggo CSS Converter

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

Sass kanggo CSS Converter

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

Alat Encoder Base64

Nggawe hash sandhi sing aman kanggo WordPress

Gawe teks goblok kanggo desain sampeyan

Gawe teks placeholder sing realistis kanggo situs web, aplikasi, lan dokumen sampeyan nganggo generator Lorem Ipsum.

HEX nganti CMYK

Ngonversi kode warna HEX menyang CMYK kanggo aplikasi cetak