Alat desain web gratis
Buat elemen visual situs web sambil melihat hasilnya langsung: gradien, bayangan, bentuk, animasi, palet, dan favicon. Setiap alat memberi kode CSS rapi untuk disalin, dan semuanya terjadi di browser Anda.
| Alat | Kategori | Pemrosesan |
|---|---|---|
| Generator gradien CSSGradien CSS linear, radial, dan konik dengan kode siap salin. | Desain | Di browser Anda |
| Generator glassmorphism CSSEfek kaca buram dalam CSS, dengan pratinjau di latar Anda. | Desain | Di browser Anda |
| Generator clip-path CSSPotong gambar menjadi poligon, lingkaran, atau persegi panjang secara manual. | Desain | Di browser Anda |
| Playground Flexbox dan CSS GridPahami dan atur flexbox dan CSS Grid secara langsung. | Desain | Di browser Anda |
| Generator box-shadow CSSBayangan CSS berlapis, preset, kode CSS dan Tailwind. | Desain | Di browser Anda |
| Generator border-radiusSudut membulat, pil, dan blob di CSS. | Desain | Di browser Anda |
| Generator filter CSSFilter CSS langsung pada gambar Anda, dengan ekspor. | Desain | Di browser Anda |
| Generator animasi CSS15 animasi CSS yang bisa diatur, kode @keyframes siap pakai. | Desain | Di browser Anda |
| Generator cubic-bezierKurva easing CSS digambar manual, dibandingkan langsung. | Desain | Di browser Anda |
| Generator palet warnaPalet harmonis dan gradasi 50–950, siap dipakai di kode. | Desain | Di browser Anda |
| Ambil warna dari gambarWarna dominan dan pipet, kode siap disalin. | Desain | Di browser Anda |
| Pemeriksa kontras warna (WCAG)Kontras WCAG AA dan AAA, dengan koreksi otomatis. | Desain | Di browser Anda |
| Generator faviconSemua favicon situs dalam satu klik, dengan kode HTML. | Desain | Di browser Anda |
| Generator gelombang SVGGelombang SVG untuk memisahkan bagian, dalam SVG atau CSS. | Desain | Di browser Anda |
| Generator pola CSSLatar berpola dengan CSS murni, tanpa gambar. | Desain | Di browser Anda |
| Generator skala tipografiSkala ukuran font dan tipografi fluid dengan clamp(). | Desain | Di browser Anda |
| Konverter satuan CSSKonversi instan px, rem, em, %, vw, pt, cm… | Desain | Di browser Anda |
| Kalkulator rasio aspekRasio gambar, ubah ukuran proporsional, dan CSS aspect-ratio. | Desain | Di browser Anda |
Tentang alat-alat ini
Alat desain menghasilkan kode CSS untuk efek paling umum di web: gradien, bayangan berlapis, kaca buram, bentuk clip-path, sudut membulat dan blob, filter gambar, pola latar, gelombang SVG, animasi, dan kurva easing. Setiap pengaturan langsung tampil di pratinjau yang dirender browser Anda dengan kode yang persis sama.
Alat lain membantu memilih dan memeriksa: palet harmonis dan skala gradasi 50 hingga 950, warna yang diambil dari gambar, kontras WCAG dengan koreksi otomatis, skala tipografi fluid, konversi satuan, dan perhitungan rasio aspek. Generator favicon membuat semua ikon yang dibutuhkan situs, dari favicon.ico hingga ikon Android.
Kode yang dihasilkan pendek dan mudah dibaca: hanya properti yang berguna yang ditulis, dengan versi Tailwind dan SCSS bila relevan. Pengaturan Anda disimpan di browser untuk kunjungan berikutnya, tanpa akun dan tanpa pengiriman data.
Alat mana yang dipilih?
Saya ingin latar atau efek permukaan
“Gradien CSS” untuk latar berwarna, “Pola CSS” untuk titik dan garis, “Glassmorphism” untuk kaca buram, “Box shadow” untuk kedalaman.
Saya ingin bentuk tertentu
“Border radius” untuk sudut membulat dan blob, “Clip-path” untuk poligon dan potongan, “Gelombang SVG” untuk pemisah bagian.
Saya ingin membuat animasi
“Animasi CSS” menyediakan 15 efek siap pakai; “Cubic Bézier” menyempurnakan kecepatan transisi Anda.
Saya sedang memilih warna
“Palet warna” menawarkan harmoni dan skala gradasi, “Ambil warna dari gambar” mengekstraknya dari foto atau logo, dan “Kontras WCAG” memeriksa keterbacaan.
Saya mengatur tata letak dan ukuran
“Flexbox dan Grid” untuk menata elemen, “Skala tipografi” untuk ukuran font, “Satuan CSS” dan “Rasio aspek” untuk konversi.
Pertanyaan umum
Apakah kode berfungsi di semua browser?
Ya: alat ini memakai properti CSS yang didukung semua browser terbaru, dan menambahkan awalan yang diperlukan (-webkit-) jika Safari membutuhkannya.
Apakah saya perlu menguasai CSS?
Tidak untuk mengatur dan melihat hasilnya. Untuk memakainya, cukup tempel kode ke stylesheet situs Anda atau ke editor seperti WordPress, Webflow, atau Wix (CSS kustom).
Apakah pengaturan saya disimpan?
Ya, hanya di browser Anda: pengaturan terakhir kembali saat kunjungan berikutnya. Tombol “Pengaturan bawaan” menghapusnya.
Apakah alat ini gratis untuk penggunaan komersial?
Ya. Kode yang dihasilkan milik Anda, tanpa atribusi atau batas penggunaan.