CSS Filters & Blend Modes Demo

📌 Elements

💡 Fundamental Filters & Blend Modes

CSS Filters & Blend Modes memungkinkan Anda menerapkan efek visual seperti blur, grayscale, dan blending pada elemen HTML. Fitur ini sangat berguna untuk desain kreatif.

filters.css

          
            /* Basic Filter */

            .image {

              filter: grayscale(100%);

            }

            /* Multiple Filters */

            .card {

              filter: blur(2px) brightness(0.8);

            }

            /* Blend Mode */

            .overlay {

              background-color: #9333ea;

              mix-blend-mode: multiply;

            }

📝 Penjelasan Detail:

• filter - Menerapkan efek visual seperti blur, grayscale, atau brightness.
• mix-blend-mode - Mengontrol bagaimana elemen berinteraksi dengan elemen di bawahnya.
• background-blend-mode - Menggabungkan warna dan gambar latar belakang.

🛠️ Features

advanced-filters.css

          
            /* Drop Shadow */

            .shadow {

              filter: drop-shadow(4px 4px 8px #9333ea);

            }

            /* Hue Rotation */

            .hue {

              filter: hue-rotate(90deg);

            }

            /* Complex Blend Mode */

            .complex-blend {

              mix-blend-mode: difference;

              background-color: #a855f7;

            }

ℹ️ Browser Support

Filters: Chrome 18+, Firefox 35+, Safari 6+, Edge 79+. Blend Modes: Chrome 41+, Firefox 32+, Safari 8+, Edge 79+.

📊 Basic Tables

filter-values.css

          
            /* Common Filter Values */

            .grayscale {

              filter: grayscale(1);

            }

            .blur {

              filter: blur(5px);

            }

            .brightness {

              filter: brightness(1.5);

            }

📝 Penjelasan Detail:

• grayscale(1) - Mengubah elemen menjadi hitam putih.
• blur(5px) - Menambahkan efek blur dengan radius 5px.
• brightness(1.5) - Meningkatkan kecerahan elemen.

🚀 Advanced Table

blend-modes.css

          
            /* Blend Modes */

            .multiply {

              mix-blend-mode: multiply;

            }

            .screen {

              mix-blend-mode: screen;

            }

            .overlay {

              mix-blend-mode: overlay;

            }

ℹ️ Browser Support

Blend Modes: Chrome 41+, Firefox 32+, Safari 8+, Edge 79+.

💡 Pro Tips

🎯 Best Practices

Gunakan filter dan blend modes secara bertanggung jawab untuk meningkatkan desain tanpa mengorbankan performa.

best-practices.css

          
            /* ✅ Good - Simple and effective */

            .hero-image {

              filter: brightness(0.8) contrast(1.2);

            }

            /* ❌ Avoid - Overusing filters */

            .over-filtered {

              filter: blur(5px) grayscale(1) sepia(1);

            }

📝 Penjelasan Detail:

• Gunakan secara selektif - Terlalu banyak filter dapat mengurangi performa.
• Kombinasikan dengan bijak - Pilih filter yang saling melengkapi.
• Uji di berbagai browser - Pastikan efek yang diterapkan konsisten.