Generator Clip Path CSS

Generator clip path CSS ini memungkinkan Anda merancang bentuk clip-path secara visual tanpa perlu menulis pasangan koordinat satu per satu. Seret titik di kanvas interaktif, lihat bentuknya berubah secara langsung, lalu salin CSS yang dihasilkan langsung ke lembar gaya Anda.

Tool ini mendukung keempat fungsi bentuk clip-path — poligon, lingkaran, elips, dan inset — serta menyediakan 28 preset siap pakai. Dibuat untuk developer frontend yang memotong UI non-persegi, desainer web yang membentuk hero section dan mask gambar, serta siapa pun yang sedang belajar cara kerja nilai clip-path sebenarnya.

Privat sejak awal: setiap bentuk dan nilai CSS dihasilkan di peramban Anda. Tidak ada apa pun — termasuk gambar latar yang Anda muat untuk pratinjau bentuk — yang pernah diunggah ke server.

Cara Menggunakan Pembuat Clip Path

Pilih tipe bentuk

Pilih tab — Poligon, Lingkaran, Elips, atau Inset — atau buka Preset untuk memulai dari bentuk siap pakai seperti bintang, panah, atau perisai.

Sunting bentuknya

Seret titik di kanvas untuk mengubah bentuk. Untuk poligon, klik tepi untuk menambah titik dan klik ganda titik untuk menghapusnya. Untuk lingkaran, elips, dan inset, seret titik pusat dan radius atau tepi, atau gunakan penggeser untuk nilai yang tepat.

Gunakan pembantu kanvas

Alihkan Luar untuk meredupkan area yang terpotong, aktifkan Kisi untuk perataan, atau ubah warna kanvas maupun unggah gambar untuk melihat bentuk pada konten nyata.

Salin CSS-nya

Nilai clip-path yang dihasilkan muncul di panel keluaran. Klik Salin CSS dan tempel ke lembar gaya Anda. Sudah punya nilainya? Gunakan Impor untuk menempel CSS yang ada dan terus menyuntingnya secara visual.

Fitur

Editor Visual Interaktif

Seret titik di kanvas 4:3 dan CSS diperbarui seketika, dengan koordinat berbasis persen untuk penempatan yang akurat.

Empat Tipe Bentuk

Buat clip path poligon, lingkaran, elips, dan inset — setiap fungsi bentuk yang didukung properti clip-path CSS.

Inset dengan Sudut Membulat

Potong ke dalam dari tiap tepi dan tambahkan border-radius untuk membulatkan sudut persegi inset.

28 Preset Bawaan

Mulai dari segitiga, poligon beraturan, bintang, panah dan chevron, balon pesan, perisai, serta variasi lingkaran/elips/inset.

Penyuntingan Titik Presisi

Masukkan nilai X/Y yang tepat untuk tiap titik poligon lewat daftar titik, dengan presisi 0,1% agar keluaran rapi dan mudah dibaca.

Pengelolaan Titik Cerdas

Klik tepi untuk menyisipkan titik di antara dua simpul terdekat, dan klik ganda atau Delete untuk menghapus — tak pernah di bawah minimum 3 titik.

Kunci Inset

Aktifkan Kunci Semua untuk mengubah keempat sisi inset sekaligus demi pemotongan yang seragam dari tiap tepi.

Riwayat Batalkan / Ulangi

Setiap perubahan dicatat dalam tumpukan riwayat hingga 50 keadaan, sehingga Anda bisa maju-mundur dengan bebas.

Impor CSS yang Ada

Tempel nilai poligon, lingkaran, elips, atau inset dan muat ke editor untuk terus menyempurnakannya secara visual.

Latar Kustom

Ubah warna kanvas atau unggah gambar untuk melihat tampilan clip path Anda pada konten nyata.

Pelapis Kisi & Area Luar

Tampilkan kisi persen 10×10 untuk perataan dan redupkan area luar agar terlihat persis bagian mana yang terpotong.

Pintasan Keyboard

Batalkan dan ulangi dengan Ctrl+Z / Ctrl+Y, geser titik terpilih dengan tombol panah (1%, atau 5% dengan Shift), dan hapus dengan Delete.

Pertanyaan yang Sering Diajukan

Apa itu clip-path di CSS?

Properti clip-path CSS menentukan area kliping untuk sebuah elemen. Hanya bagian di dalam bentuk yang tetap terlihat; semua yang di luar disembunyikan. Properti ini umum dipakai untuk tata letak non-persegi, mask gambar, dan elemen UI dekoratif.

Bagaimana clip-path polygon bekerja?

Nilai polygon() adalah daftar pasangan koordinat X/Y yang dihubungkan oleh tepi lurus, misalnya polygon(50% 0%, 100% 100%, 0% 100%) untuk segitiga. Setiap titik adalah persentase dari lebar dan tinggi elemen. Di tool ini Anda menyeret titik alih-alih mengetik pasangannya, dan generator menuliskan nilai poligonnya untuk Anda.

Bagaimana cara menambah atau menghapus titik poligon?

Klik di dekat tepi pada kanvas untuk menyisipkan titik baru di antara dua simpul terdekat. Untuk menghapusnya, klik ganda titiknya, pilih lalu tekan Delete atau Backspace, atau gunakan tombol hapus di daftar titik. Poligon selalu mempertahankan minimal 3 titik, jadi kontrol hapus akan dinonaktifkan begitu Anda mencapai batas minimum.

Bisakah clip-path memiliki sudut membulat?

Bisa, dengan bentuk inset. Kata kunci round pada inset() menambahkan border-radius ke persegi yang terpotong — misalnya inset(10% round 20%) memotong 10% dari tiap tepi dan membulatkan sudut sebesar 20%. Atur kontrol Border Radius pada tab Inset untuk menyetelnya.

Apa beda lingkaran dan elips?

Lingkaran punya satu radius dan selalu bulat sempurna. Elips punya dua radius mandiri — satu horizontal (X) dan satu vertikal (Y) — sehingga Anda bisa membuat bentuk oval yang lebih lebar atau lebih tinggi daripada bulat.

Bisakah saya mengimpor CSS clip-path yang sudah ada?

Bisa. Klik Impor di bawah keluaran CSS, tempel nilai Anda (dengan atau tanpa awalan clip-path:), lalu terapkan. Pengurai menangani keempat tipe bentuk — poligon, lingkaran, elips, dan inset — dan memuat bentuknya ke editor untuk penyesuaian lebih lanjut.

Apakah clip-path didukung di semua peramban?

Bentuk dasar yang digunakan di sini — poligon, lingkaran, elips, dan inset — didukung di semua versi terkini Chrome, Firefox, Safari, dan Edge. Untuk peramban yang sangat lama, sediakan fallback atau polyfill.

Apakah bentuk saya tersimpan antarsesi?

Tidak. Bentuk tidak dipertahankan antarmuat halaman, jadi salin CSS Anda sebelum meninggalkan halaman. Anda bisa menyimpan nilainya sendiri dan memuatnya kembali kapan saja lewat fitur Impor.

Apakah data saya dikirim ke server?

Tidak. Semua penyuntingan bentuk dan pembuatan CSS terjadi sepenuhnya di peramban Anda. Tidak ada data yang diunggah atau dikirim, termasuk gambar latar yang Anda muat untuk pratinjau bentuk.