Penjana CSS Grid & Flexbox

Tukar antara Grid dan Flexbox, laraskan bilangan lajur dan baris atau arah serta penjajaran item flex dan jurang antaranya, dengan pratonton langsung kotak berwarna di dalam kontena, kemudian salin kod CSS yang tepat.

Alat Reka Bentuk dan CSS Berjalan sepenuhnya dalam pelayar anda

Semua pemprosesan berlaku pada peranti anda — tiada apa-apa dihantar ke pelayan.

Lajur3Baris2Jurang (Gap)12px

Kod CSS

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

Teruskan dengan

Sepenuhnya tempatan

Penjana Clip-Path CSS

Pilih bentuk sedia ada (bulatan, segi tiga, bintang, gelembung mesej...) dan salin kod CSS clip-path.

Alat Reka Bentuk dan CSSBuka alat

Sepenuhnya tempatan

Penjana Easing Cubic Bezier

Seret dua titik untuk mereka lengkung easing gerakan tersuai secara visual dan salin kod cubic-bezier.

Alat Reka Bentuk dan CSSBuka alat

Sepenuhnya tempatan

Penjana Glassmorphism CSS

Reka kesan kad kaca kabur (frosted-glass) secara visual dan salin kod CSS yang sedia digunakan.

Alat Reka Bentuk dan CSSBuka alat

Alat berkaitan

Sepenuhnya tempatan

Penukar Teks ke Tulisan Tangan

Tukar teks yang ditaip menjadi imej yang kelihatan seperti tulisan tangan pada kertas bergaris, dalam pelbagai gaya tulisan.

Alat Reka Bentuk dan CSSBuka alat

Sepenuhnya tempatan

Penjana Blob & Corak Latar Belakang SVG

Jana bentuk blob organik rawak atau corak latar belakang berulang tanpa sambungan sebagai SVG, dan salin atau muat turun.

Alat Reka Bentuk dan CSSBuka alat

Sepenuhnya tempatan

Penjana Animasi Keyframe CSS

Reka animasi CSS secara visual (fade, slide, zoom, bounce, rotate, flip) dan dapatkan kod @keyframes yang sedia digunakan.

Alat Reka Bentuk dan CSSBuka alat

Sepenuhnya tempatan

Penjana Harmoni Palet Warna

Pilih warna asas dan dapatkan palet warna harmoni (komplementari, analog, triadik, tetradik, monokromatik).

Alat Reka Bentuk dan CSSBuka alat

Sepenuhnya tempatan

Penjana Mesh Gradient

Cipta latar belakang mesh gradient berbilang titik yang lembut dengan sekali klik, dan salin kod CSS yang sedia digunakan.

Alat Reka Bentuk dan CSSBuka alat

Ingin mencuba Uddatak?

Layari perpustakaan alat yang lengkap dan mula gunakan apa yang anda perlukan sekarang — percuma, tanpa pendaftaran.

Lihat semua alat