Lewati ke konten utama
iotools.cloudiotools.cloud

Pembuat Filter CSS

Buat deklarasi filter CSS dengan menggabungkan slider blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate, dan sepia menjadi satu properti filter berantai.

Input

Output

CSS
Apakah ini membantu?

Cara lain menggunakan alat ini

REST API

curl -X POST https://api.iotools.cloud/v1/tool/css-filter-generator \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "blur": "2",
    "brightness": "110",
    "contrast": "100",
    "grayscale": "50",
    "hueRotate": "0",
    "invert": "0",
    "opacity": "100",
    "saturate": "100",
    "sepia": "0"
  }'

Ganti dengan kunci Anda sendiri dari akun Anda. Bidang alat menjadi isi permintaan — tanpa pembungkus.

Tanyakan ke agen AI

Use the IOTools `css-filter-generator` tool (CSS Filter Generator) on this input:

YOUR_INPUT_HERE

Tempelkan ini ke agen mana pun yang terhubung ke server MCP IOTools, lalu tambahkan input Anda.

Widget sematan

<iframe
  src="https://iotools.cloud/embed/css-filter-generator/"
  width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
  title="Pembuat Filter CSS — iotools.cloud"
  sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
  allow="clipboard-write"
  style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>

Tempelkan ini di halaman Anda sendiri — gratis, tanpa kunci, cukup tautan balik.

Biaya per panggilan API/MCPMulai dari 5 kredit
Butuh kredit lebih?Lihat harga

Juga tersedia melalui

IntegrasiEkstensi browserEkstensi VS Code

Panduan

Apa itu properti filter CSS?

filter menerapkan efek grafis — blur, penyesuaian warna, dan lainnya — langsung ke elemen dengan satu baris CSS, tanpa memerlukan editor gambar atau markup tambahan. Beberapa fungsi dapat dirantai dalam satu deklarasi, dipisahkan oleh spasi, dan browser menerapkannya sesuai urutan penulisan. Ini banyak digunakan untuk efek hover, perawatan gambar (galeri grayscale, tampilan sepia "vintage"), gaya status disabled, dan tinting warna merek cepat.

Sembilan fungsi filter yang dicakup alat ini

  • blur(px) — melunakkan elemen dengan Gaussian blur. Nilai lebih besar mengaburkan lebih banyak.
  • brightness(%) — menskalakan luminansi. 100% tidak berubah, di bawahnya menggelapkan, di atasnya mencerahkan.
  • contrast(%) — menskalakan perbedaan antara area terang dan gelap. 100% tidak berubah.
  • grayscale(%) — menghilangkan saturasi menuju hitam-putih. 100% sepenuhnya grayscale.
  • hue-rotate(deg) — memutar semua hue di sekitar roda warna dengan sudut yang diberikan.
  • invert(%) — membalikkan warna. 100% menghasilkan efek negatif fotografi.
  • opacity(%) — membuat elemen transparan, seperti properti opacity tetapi sebagai fungsi filter (sehingga dapat dirantai dengan yang lain).
  • saturate(%) — menskalakan intensitas warna. Di bawah 100% meredam warna, di atas 100% membuatnya lebih cerah.
  • sepia(%) — menggeser gambar menuju nada coklat hangat "foto lama". 100% sepenuhnya sepia.

Cara menggunakan alat ini

  1. Seret slider apa pun untuk menyesuaikan fungsi filter tersebut — CSS yang dihasilkan diperbarui secara instan saat Anda bekerja.
  2. Gabungkan beberapa slider untuk membangun efek berlapis (misalnya sentuhan sepia plus dorongan contrast untuk tampilan vintage).
  3. Biarkan slider pada posisi defaultnya (tidak berubah) untuk melewati fungsi itu sepenuhnya — alat ini hanya menulis fungsi yang benar-benar mengubah output, menjaga garis yang dihasilkan singkat dan dapat dibaca.
  4. Salin CSS yang dihasilkan dari kotak CSS, atau unduh sebagai file .css, dan tempel ke stylesheet atau blok <style>. Terapkan ke selector apa pun: .my-element { filter: ...; }.

Urutan fungsi

Ketika lebih dari satu filter aktif, alat ini selalu menulisnya dalam urutan tetap — blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate, sepia — sesuai dengan urutan slider di form. CSS menerapkan fungsi filter berantai dari kiri ke kanan, jadi jika Anda mengedit output secara manual nanti, perhatikan hal ini: mengubah urutan fungsi dapat mengubah hasil visual, terutama ketika blur dicampur dengan penyesuaian warna.

FAQ

Mengapa output tidak mencantumkan setiap fungsi filter setiap kali? Filter yang dibiarkan pada nilai neutral (brightness(100%), blur(0px), dan sebagainya) tidak mengubah cara elemen terlihat, jadi menyertakannya hanya akan menjadi noise. Alat ini menghilangkan fungsi no-op dan kembali ke filter: none; ketika setiap slider pada default.

Bisakah saya menganimasikan atau transisi filter ini? Ya — filter dapat dianimasikan dengan CSS transition atau @keyframes, yang merupakan cara umum untuk membangun efek hover mulus (misalnya transition: filter 0.2s ease; bersama dengan aturan :hover yang menukar nilai filter berbeda).

Apakah filter mempengaruhi tata letak? Tidak. Seperti transform, filter murni visual — tidak mengalirkan ulang konten sekitar, meskipun blur besar dapat bocor secara visual di luar kotak elemen.

Apakah filter didukung di semua browser? Ya, unprefixed filter memiliki dukungan penuh di semua browser modern.

Apa perbedaan antara filter: opacity() dan properti opacity CSS? Mereka menghasilkan hasil visual yang sama, tetapi filter: opacity() bersusun dengan fungsi filter lain dalam rantai filter tunggal, sementara properti opacity mandiri adalah deklarasi terpisah yang lebih sederhana. Gunakan properti opacity biasa kecuali Anda sudah merantai filter lain.

Privasi

Semuanya terjadi di browser Anda. Tidak ada CSS, nilai, atau pengaturan yang Anda masukkan yang pernah dikirim ke server — deklarasi dihasilkan dan diperbarui secara lokal saat Anda menyesuaikan slider.

cssfiltergeneratorblurbrightnesscontrastgrayscalehue-rotateinvertopacitysaturatesepiaweb design

Suka alat-alatnya? Hilangkan iklannya.

Satu kali pembayaran menghapus semua iklan dari akun Anda, selamanya. Tanpa langganan, tanpa pelacakan.

Hapus iklan