Fade Tepi Gambar dengan CSS — Generator Tepi Lembut

Mengapa memudarkan tepi dengan mask?

Sebuah gradient mask memudarkan gambar itu sendiri sehingga menyatu dengan apa pun di belakangnya — latar halaman, gradient, atau gambar lain — alih-alih menutupinya dengan lapisan warna. Cara ini bekerja di latar mana pun, di tema terang maupun gelap, dan tidak mengubah file gambarmu.

img.soft {
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 15%, #000 85%, transparent),
                      linear-gradient(to right, transparent, #000 15%, #000 85%, transparent);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
}

Dua gradient — satu vertikal, satu horizontal — digabung dengan mask-composite: intersect sehingga keempat sisi memudar. Untuk fade melingkar bergaya vignette, gunakan CSS Vignette Generator; untuk bentuk, gunakan Image Shape Mask.

Juga dicari sebagai: css fade edges, tepi lembut gambar css, fade out gambar css, efek fade gambar css, blur tepi gambar css, feather gambar css, gambar fade transparan css.

Tool yang cocok dipakai bersama Fade Tepi Gambar CSS

• Generator CSS Mask — Buat gambar dan bagian halaman memudar perlahan alih-alih berakhir tegas: pudarkan satu tepi, atas dan bawah, keempat tepi, vignette radial atau spotlight, atau potong elemen menjadi garis-garis.
• Generator Gradient CSS — Rancang gradient secara visual — geser titik warna, ubah sudut atau jenisnya, mulai dari preset — lalu salin CSS siap pakai dengan warna solid sebagai fallback.
• Generator CSS Clip-path — Potong gambar dan elemen menjadi bentuk apa pun: pilih salah satu dari 15 bentuk awal — segitiga, heksagon, bintang, panah, chevron, balon bicara, lingkaran, elips, persegi rounded inset… — lalu geser titiknya di atas contoh atau gambarmu sendiri.
• Generator CSS Filter — Atur blur, brightness, contrast, saturation, hue, grayscale, sepia, invert dan drop shadow pada contoh atau gambarmu sendiri, lalu salin CSS filter-nya.