Generator Filter CSS Online Gratis
Buat efek filter CSS dengan pratinjau langsung.
'/%3E%3Ccircle cx='200' cy='150' r='70' fill='rgba(255,255,255,.25)'/%3E%3C/svg%3E)
Who uses the Generator Filter CSS?
- Developer front-end yang mempratinjau kombinasi filter gambar sebelum menerapkannya ke proyek.
- Desainer UI yang membuat prototipe visual status hover dan tema warna dalam CSS.
- Developer web yang mengeksplorasi bagaimana filter brightness/contrast/saturation berinteraksi sebelum menulis CSS final.
How the Generator Filter CSS works
Alat ini dimuat dengan gambar gradien contoh bawaan — tidak ada opsi unggah.
Sesuaikan slider filter: brightness, contrast, saturation (0–200%), hue rotation (0–360°), blur (0–20px), grayscale, sepia, dan invert (0–100%).
Gabungkan beberapa filter untuk mendapatkan efek yang diinginkan; klik Reset untuk mengembalikan semua slider ke nilai default.
Salin properti CSS filter dari panel output untuk digunakan di proyek Anda.
Tips & tricks
- Tidak ada unggah gambar — uji kombinasi filter pada gambar pratinjau bawaan sebelum menyalin CSS untuk diterapkan ke gambar asli Anda.
- Filter yang tetap pada nilai default (brightness 100%, blur 0, dll.) secara otomatis dihilangkan dari output, membuat CSS yang dihasilkan tetap ringkas.
- opacity() dan drop-shadow() tidak disediakan sebagai slider di sini — tambahkan secara manual ke nilai filter yang disalin jika diperlukan.
- Klik Reset untuk langsung mengembalikan setiap slider ke default dan memulai kembali.
Frequently Asked Questions
Filter CSS apa saja yang dihasilkan alat ini?
Delapan filter: brightness(), contrast(), saturate(), hue-rotate(), blur(), grayscale(), sepia(), dan invert(). Filter-filter ini digabungkan dalam urutan tersebut menjadi satu properti filter, dan filter yang tetap pada nilai default (tanpa efek) dihilangkan.
Bisakah saya mengunggah gambar sendiri untuk mempratinjau filter?
Saat ini tidak — pratinjau menggunakan gambar gradien bawaan yang tetap. Salin CSS filter yang dihasilkan dan terapkan pada gambar Anda sendiri di proyek Anda untuk melihat efeknya pada konten sebenarnya.
Bagaimana cara menerapkan filter CSS pada gambar saat hover?
Tambahkan filter di :hover: .image { filter: none; transition: filter 0.3s; } .image:hover { filter: brightness(1.2) contrast(1.1); } Ini menciptakan transisi filter yang halus saat kursor mouse berada di atas gambar.
Apa perbedaan antara filter box-shadow dan drop-shadow?
box-shadow diterapkan pada kotak (persegi panjang) elemen. Filter drop-shadow() mengikuti bentuk alfa sebenarnya dari elemen — cocok untuk gambar PNG dengan transparansi sehingga bayangan mengikuti kontur gambar. Alat ini tidak menyertakan kontrol drop-shadow; tambahkan secara manual ke CSS yang disalin jika diperlukan.
Bisakah filter CSS dianimasikan?
Bisa. Filter CSS dapat dianimasikan dengan transisi dan animasi keyframe: @keyframes pulse { 0% { filter: brightness(1); } 50% { filter: brightness(1.5); } 100% { filter: brightness(1); } }
Is my data safe when using the Generator Filter CSS?
Completely safe. The Generator Filter CSS processes everything locally in your browser. No input data, results, or usage information is ever transmitted to or stored on any server.
Can I use the Generator Filter CSS output in commercial projects?
Yes. The Generator Filter CSS is a utility tool and its output carries no licensing restrictions. You are free to use results in any project, commercial or personal.
Does the Generator Filter CSS follow official standards?
Yes. The Generator Filter CSS is built to comply with the relevant industry standard or specification for this utility type. If you encounter an unexpected result, verify your input against the specification — edge cases outside the standard may produce undefined behaviour.