Cara menggunakan Generator CSS Clip-path
- Pilih bentuk awal — poligon, lingkaran, elips, atau inset melengkung.
- Geser titik di atas gambar. Pilih sebuah titik lalu klik + Tambah titik untuk menyisipkan titik setelahnya, atau Hapus titik. Mulai dari Persegi panjang untuk menggambar bentukmu sendiri.
- Untuk lingkaran, elips, dan inset, gunakan slider di panel.
- Salin CSS dan terapkan ke gambar, video, atau elemen apa pun. Pakai Pakai gambar saya untuk pratinjau dengan gambarmu sendiri.
clip-path secara singkat
clip-path menyembunyikan semua bagian di luar sebuah bentuk. Elemen tetap mempertahankan ukuran dan tata letaknya; yang berubah hanya area yang terlihat. Ini cocok untuk gambar hero, avatar, bentuk pemisah section, dan efek hover (nilai clip-path dengan jumlah titik yang sama bisa dianimasikan dengan transition).
| Fungsi | Contoh |
|---|---|
polygon() | polygon(50% 0%, 100% 100%, 0% 100%) — sebuah segitiga; jumlah titik bebas |
circle() | circle(40% at 50% 50%) |
ellipse() | ellipse(45% 35% at 50% 50%) |
inset() | inset(10% 5% round 24px) — persegi panjang rounded yang dipotong dari tepi |
Persentase dihitung relatif terhadap kotak elemen, jadi bentuknya ikut menyesuaikan ukuran. Semua browser modern mendukung bentuk clip-path; baris -webkit- mencakup Safari versi lama. Untuk membuat tepi memudar alih-alih dipotong, gunakan CSS Mask Generator; untuk bentuk organik, gunakan SVG Blob Generator.
Juga dicari sebagai: generator clip-path css, css clip-path generator, clip-path polygon, bentuk gambar css, generator polygon css, clip-path lingkaran, membuat bentuk css, css image shape.
Tool yang cocok dipakai bersama Generator CSS Clip-path
- Generator Border Radius — Bulatkan sudut kotak mana pun: geser satu slider untuk semua sudut atau atur tiap sudut secara terpisah, beralih ke sudut elips untuk bentuk blob dan daun, lalu salin CSS border-radius terpendek yang valid.
- Generator Segitiga CSS — Buat segitiga murni CSS untuk panah tooltip, caret dropdown, atau balon ucapan: pilih salah satu dari 8 arah, atur lebar, tinggi, dan warnanya, lalu salin trik border klasik atau versi clip-path yang lebih sederhana.
- 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.
- Generator Wave SVG — Rancang pemisah bagian bergelombang untuk landing page: tambah atau hapus gelombang (hingga 6, masing-masing dengan warna, opasitas, dan bentuk sendiri), atur jumlah puncak, tinggi, dan kehalusan, pilih warna, serta tentukan apakah gelombang berada di atas atau bawah.
Pertanyaan yang sering diajukan
Bagaimana cara membuat bentuk poligon CSS?
Pilih bentuk awal di sini, geser titik ke posisi yang kamu inginkan, lalu salin baris clip-path: polygon(…). Setiap titik berupa pasangan x% y% yang relatif terhadap elemen.
Bagaimana cara menambah titik pada poligon clip-path?
Pilih sebuah titik lalu klik + Tambah titik: titik baru akan muncul di tengah antara titik itu dan titik berikutnya, siap digeser. Klik ganda pada gambar akan menambahkan titik di tepi terdekat; Hapus titik akan menghapus titik yang dipilih.
Bisakah clip-path dianimasikan?
Bisa. Gunakan transition atau animate di antara dua nilai clip-path dengan jenis yang sama dan jumlah titik yang sama, misalnya dua bentuk polygon() dengan masing-masing 6 titik.
Apakah clip-path berfungsi di semua browser?
Bentuk dasar (polygon, circle, ellipse, inset) berfungsi di semua browser modern. Tambahkan baris -webkit-clip-path yang disertakan tool ini untuk versi Safari lama.
Kenapa bayangan saya hilang saat memakai clip-path?
clip-path juga memotong box-shadow. Bungkus elemen dalam parent, lalu gunakan filter: drop-shadow() pada parent tersebut.
Bisakah saya memasang Generator CSS Clip-path sebagai aplikasi web dan memakainya offline?
Bisa. Generator CSS Clip-path adalah aplikasi web (PWA) yang bisa dipasang. Pemasangannya lewat browser kamu, bukan diunduh dari toko aplikasi. Klik Pasang aplikasi di bagian atas halaman ini di Chrome atau Edge (Windows, macOS, Linux, ChromeOS) atau di Android. Di iPhone dan iPad, gunakan Bagikan → Tambahkan ke Layar Utama, dan di Safari 17+ pada Mac, gunakan File → Tambahkan ke Dock. Setelah itu, aplikasi akan terbuka di jendelanya sendiri dengan ikonnya sendiri. Karena berjalan sepenuhnya di browser kamu, aplikasi ini tetap bisa dipakai offline. Firefox di desktop tidak bisa memasang aplikasi web. Cara memasang aplikasi.