Generator Tata Letak CSS Grid & Flexbox

Beralih antara Grid dan Flexbox, sesuaikan jumlah kolom dan baris atau arah dan perataan item flex serta jarak di antaranya, dengan pratinjau langsung kotak berwarna di dalam kontainer, lalu salin kode CSS yang tepat.

Alat Desain dan CSS Berjalan sepenuhnya di browser Anda

Semua pemrosesan dilakukan di perangkat Anda — tidak ada yang dikirim ke server.

Kolom3Baris2Jarak (Gap)12px

Kode CSS

display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
gap: 12px;

Lanjutkan dengan

Sepenuhnya lokal

Generator Clip-Path CSS

Pilih bentuk siap pakai (lingkaran, segitiga, bintang, gelembung pesan...) dan salin kode clip-path.

Alat Desain dan CSSBuka alat

Sepenuhnya lokal

Generator Kurva Easing Cubic Bezier

Seret dua titik untuk merancang kurva easing gerakan kustom secara visual dan salin kode cubic-bezier.

Alat Desain dan CSSBuka alat

Sepenuhnya lokal

Generator Glassmorphism CSS

Rancang efek kartu kaca buram secara visual dan salin kode CSS yang siap digunakan.

Alat Desain dan CSSBuka alat

Alat terkait

Sepenuhnya lokal

Konverter Teks ke Tulisan Tangan

Ubah teks yang diketik menjadi gambar yang terlihat seperti tulisan tangan di atas kertas bergaris, dengan beberapa gaya tulisan tangan.

Alat Desain dan CSSBuka alat

Sepenuhnya lokal

Pembuat Blob SVG & Pola Latar Belakang

Buat bentuk organik acak (blob) atau pola latar belakang berulang mulus dalam SVG, lalu salin atau unduh.

Alat Desain dan CSSBuka alat

Sepenuhnya lokal

Pembuat Animasi CSS Keyframe

Rancang animasi CSS secara visual (fade, geser, zoom, pantul, putar, balik) dan dapatkan kode @keyframes siap pakai.

Alat Desain dan CSSBuka alat

Sepenuhnya lokal

Pembuat Harmoni Palet Warna

Pilih warna dasar dan dapatkan palet warna yang harmonis (komplementer, analog, triadik, tetradik, monokromatik).

Alat Desain dan CSSBuka alat

Sepenuhnya lokal

Pembuat Gradasi Mesh

Buat latar belakang gradasi mesh multi-titik yang lembut dengan satu klik, dan salin kode CSS siap pakai.

Alat Desain dan CSSBuka alat

Siap mencoba Uddatak?

Jelajahi seluruh pustaka alat dan mulai gunakan apa yang Anda butuhkan sekarang — gratis, tanpa pendaftaran.

Jelajahi semua alat