Generator Border Radius Kreatif
Generator border radius kreatif gratis online. Seret 8 pegangan atau pilih prasetel blob untuk membuat bentuk CSS organik dan menyalin kodenya seketika.
Apa arti sintaks border-radius dengan 8 nilai?
Pada sintaks border-radius: h1 h2 h3 h4 / v1 v2 v3 v4, nilai sebelum garis miring adalah radius horizontal (kiri atas, kanan atas, kanan bawah, kiri bawah) dan nilai sesudahnya adalah radius vertikal. Nilai yang berbeda di setiap arahlah yang menciptakan bentuk blob organik.
Bagaimana cara memakai CSS yang dihasilkan?
Salin baris border-radius dan tempelkan ke aturan CSS elemen yang ingin dibentuk, misalnya .card { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }. Berfungsi di CSS murni, Sass, nilai arbitrer Tailwind, maupun gaya inline.
Di mana bentuk blob biasa digunakan?
Bentuk blob populer untuk ilustrasi hero, avatar, foto profil, kartu fitur, tombol, dan latar belakang dekoratif dalam desain web dan aplikasi modern.
Apakah sudut membulat didukung semua browser?
Ya. border-radius didukung semua browser modern, termasuk Chrome, Firefox, Safari, Edge, dan browser seluler, tanpa perlu prefiks vendor.
Bisakah bentuk blob dianimasikan?
Bisa. border-radius adalah properti yang dapat dianimasikan, sehingga transisi CSS memungkinkan morphing halus antar bentuk, misalnya .blob { transition: border-radius .8s ease; }.
Apa bedanya sintaks 4 nilai dan 8 nilai?
Bentuk 4 nilai menetapkan radius horizontal dan vertikal yang sama untuk tiap sudut, cukup untuk pil atau lingkaran. Bentuk 8 nilai memisahkan radius horizontal dan vertikal sehingga memungkinkan bentuk asimetris yang organik.
Bagaimana membuat lingkaran sempurna?
Atur kedelapan nilai menjadi 50% pada elemen persegi, atau cukup gunakan border-radius: 50%. Anda juga bisa mulai dari prasetel yang mendekati lingkaran lalu menyempurnakannya.
Apakah data saya diunggah ke mana pun?
Tidak. Generator ini berjalan sepenuhnya di browser Anda dengan CSS dan JavaScript murni. Apa pun yang Anda seret, ketik, atau salin tidak dikirim ke server.
Bisakah dipakai untuk elemen yang tidak persegi?
Bisa, tetapi radius persentase relatif terhadap dimensi elemen, sehingga persegi panjang akan menghasilkan sudut elips dengan tampilan berbeda dari pratinjau persegi. Jadikan nilai yang dihasilkan sebagai titik awal lalu sesuaikan.
Cara Menggunakan Generator Border Radius Kreatif
Border-radius delapan nilai menghasilkan bentuk blob organik dengan sudut elips yang tak bisa ditandingi persegi panjang membulat biasa. Bentuklah dengan pegangan seret dan salin CSS jadi — semuanya dirender langsung di browser Anda.
- Seret salah satu dari delapan pegangan di tepi bentuk — pegangan di tepi atas dan bawah mengatur radius horizontal, sedangkan di kiri dan kanan mengatur radius vertikal.
- Klik salah satu dari enam kotak prasetel untuk mulai dari blob yang sudah didesain, lalu sempurnakan nilainya di input angka Radius horizontal dan Radius vertikal (satu per sudut, 0–100%).
- Tekan Acak untuk melahirkan bentuk organik baru dalam satu klik, atau Atur ulang untuk kembali ke bentuk dan warna bawaan.
- Pilih Warna bentuk dan Latar belakang untuk melihat blob di atas palet target Anda — keduanya diperbarui seketika.
- Tekan Salin CSS untuk mengambil deklarasi border-radius yang tampil langsung di bilah bawah, lalu tempel ke elemen mana pun.
Terapkan kode pada elemen persegi dengan overflow: hidden untuk tampilan blob klasik; persen menjaga kurva tetap mulus di ukuran apa pun, dan garis miring pada sintaks memisahkan radius horizontal dari vertikal.
Alat Terkait
- Generator Border Radius CSS Generator border-radius CSS visual. Sesuaikan setiap sudut secara independen dengan pratinjau real-time dan salin kode CSS secara instan.
- Generator Gradien CSS Buat gradien CSS menakjubkan secara visual. Hasilkan gradien linear, radial dan konikal dengan beberapa color stop, sudut dan posisi kustom. Salin kode CSS siap produksi secara instan.
- Generator Box Shadow CSS Generator box-shadow CSS online gratis. Buat bayangan indah secara visual dengan offset, blur, spread, warna, dan inset yang dapat disesuaikan. Pratinjau langsung dan salin kode instan.
- Generator Palet Warna Buat palet warna yang indah dan harmonis secara instan dengan generator online gratis kami. Mendukung mode monokromatik, analog, komplemen, triadik, split-komplemen, dan tetradik. Sesuaikan warna dengan slider HSL, kunci favorit, dan ekspor sebagai CSS, Tailwind, JSON, atau SVG. 100% berbasis browser, data Anda tidak pernah meninggalkan perangkat.
- Konverter Warna Konverter warna online gratis. Konversi format HEX, RGB, HSL, HSV secara instan dengan pemilih visual. 100% pribadi, berjalan di browser Anda.
- Generator Easing CSS Generator easing CSS online gratis. Geser titik kendali cubic-bezier pada kurva interaktif, pilih dari 18 preset, lihat pratinjau bola berulang, dan salin fungsi timing seketika.
- Generator Text Shadow CSS Generator text-shadow CSS online gratis. Tumpuk beberapa lapisan bayangan dengan offset, blur, warna, dan opasitas, coba preset Neon, 3D, Retro, dan salin CSS-nya seketika.
- Generator Clip Path CSS Generator clip-path CSS online gratis. Desain bentuk polygon, circle, ellipse, dan inset dengan titik yang bisa digeser, pratinjau langsung, dan salin kode CSS sekali klik.