Pembuat efek CSS

Border-radius, kaca, neumorphism, text-shadow, filter dan clip-path CSS.

Presets
Top left
Top right
Bottom right
Bottom left
Preview

Apa yang dilakukan

Enam efek CSS dengan pratinjau yang digambar browser Anda dan kode siap salin. Border radius dengan delapan nilainya (radius horizontal dan vertikal tiap sudut) untuk bentuk gumpalan, daun dan telur, ditulis dalam bentuk terpendek. Kaca dengan latar tembus pandang, backdrop-filter dengan blur dan saturasi, garis tepi terang, awalan -webkit- dan cadangan untuk browser tanpa dukungan. Neumorphism dengan permukaan lembut dari satu warna dasar. Bayangan teks berlapis. Filter (blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate, sepia) pada gambar contoh atau gambar Anda, yang tidak pernah diunggah. Clip-path dengan poligon beraturan, bintang, panah dan balon percakapan.

Keterbacaan

Di atas kaca, teks dibaca terhadap latar yang diburamkan dan dicampur warna kaca; alat ini memperkirakan warna itu dan menampilkan kontras terburuk. WCAG AA meminta 4,5:1 untuk teks biasa. Pada neumorphism, tepi gelap biasanya hanya sekitar 1,4:1 terhadap latar, di bawah 3:1 yang diminta WCAG 1.4.11 untuk kontrol, jadi tambahkan garis tepi, ikon atau label. Safari sebelum versi 18 memerlukan -webkit-backdrop-filter, yang sudah disertakan.

Pertanyaan yang sering diajukan

Mengapa efek blur tidak terlihat?

backdrop-filter memburamkan apa yang ada di belakang; latar elemen harus sebagian transparan.

Apakah neumorphism aksesibel?

Tidak dengan sendirinya: kontras tepinya biasanya di bawah 3:1.

Apakah urutan filter berpengaruh?

Ya, setiap fungsi diterapkan pada hasil fungsi sebelumnya.