CSS Clip-Path Generator

Generate CSS clip-path shapes visually.

Jenis bentuk

Radius: 40%

Pusat X: 50%

Pusat Y: 50%

Pratinjau langsung

CSS yang dihasilkan

.element {
  clip-path: circle(40% at 50% 50%);
}

Tentang alat ini

Generator CSS Clip-Path membuat nilai clip-path untuk empat jenis bentuk: circle(), ellipse(), inset(), dan polygon().

Memungkinkan tata letak kreatif, masker gambar, dan bentuk bagian hero tanpa file SVG. Semua parameter memperbarui pratinjau secara real time.

Cara penggunaan

Pilih jenis bentuk: circle, ellipse, inset, atau polygon.
Sesuaikan slider untuk mengonfigurasi parameter bentuk.
Untuk poligon, pilih bentuk prasetel dari daftar.
Pratinjau langsung diperbarui saat penyesuaian.
Klik Salin untuk menyalin CSS ke clipboard.

Kasus penggunaan

Bagian hero menggunakan clip-path diagonal atau melengkung sebagai pembatas visual. Foto profil menggunakan circle(). Efek hover menggunakan animasi clip-path.

Pertanyaan umum

Apakah clip-path memengaruhi area yang dapat diklik? — Ya. Area yang dipotong tidak dapat diklik.
Bisakah saya menganimasikan clip-path? — Ya. Dapat ditransisikan antara dua bentuk poligon dengan jumlah titik yang sama.
Apakah clip-path didukung semua browser? — Ya, dengan dukungan penuh di semua browser modern.