Desain & CSS
Buat CSS secara visual: bayangan, gradien, layout flexbox dan grid, animasi, dan palet warna
Buat CSS secara visual lalu salin kodenya: box shadow dan text shadow, gradien dan mesh gradient, layout flexbox dan grid, border radius, clip path, filter, transform, animasi, serta efek glassmorphism atau neumorphism. Generator palet dan gradasi warna membantu Anda menyusun sistem warna yang konsisten, sedangkan generator gelombang, blob, dan pola SVG membuat latar belakang yang ringan.
Jumlah alat dalam kategori ini: 18
Tempat yang baik untuk memulai
Semua alat dalam kategori ini
-
Generator CSS Animation
Buat animasi CSS @keyframes dari preset atau keyframe Anda sendiri, atur durasi, jeda, perulangan, arah, fill mode, dan kurva cubic-bezier.
-
Generator Border Radius
Buat CSS border-radius dengan sudut independen, radius X/Y elips, satuan px atau %, dan preset blob. Menghasilkan shorthand valid yang paling ringkas.
-
Generator Clip Path
Buat bentuk CSS clip-path: poligon dengan titik yang bisa diseret dan preset, lingkaran, elips, serta inset dengan sudut membulat. Pratinjau langsung dan salin kode.
-
Generator Palet Warna
Buat palet warna dari warna dasar dengan harmoni komplementer, analog, triadik, tetradik, persegi, atau monokromatik. Kunci warna dan ekspor ke CSS/Tailwind.
-
Generator Gradasi Warna
Ubah satu warna menjadi skala 50–950 ala Tailwind plus tint, shade, dan tone. Dihitung dalam OKLCH dan sRGB, diekspor sebagai variabel CSS, Tailwind, atau JSON.
-
Generator CSS Box Shadow
Buat CSS box-shadow secara visual: tumpuk beberapa lapisan, atur offset, blur, spread, inset, dan opasitas RGBA, lihat pratinjau langsung, lalu salin kodenya.
-
Generator CSS Flexbox
Atur flex-direction, wrap, justify-content, align-items, gap, serta flex, order, dan align-self per item secara visual, dengan elemen anak langsung dan CSS siap salin.
-
Generator CSS Gradient
Rancang gradien CSS linear, radial, dan conic dengan titik warna yang bisa diseret, sudut, mode berulang, dan interpolasi OKLCH. Pratinjau langsung, salin kodenya.
-
Generator CSS Grid
Bangun tata letak CSS Grid secara visual: grid-template-columns/rows, area bernama dengan validasi, gap, perataan, dan penempatan per item. Salin CSS yang rapi.
-
Generator CSS Filter
Gabungkan fungsi CSS filter (blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate, sepia, drop-shadow) pada gambar contoh atau gambar Anda sendiri.
-
Generator Glassmorphism
Buat CSS kaca buram dengan blur dan saturasi backdrop-filter, warna dan opasitas tint, border, dan bayangan, termasuk prefiks -webkit- untuk Safari.
-
Generator Mesh Gradient
Buat latar CSS bergaya mesh yang lembut dari gradien radial berlapis. Seret titik warna, atur sebaran, acak dengan seed, dan salin kode CSS murni.
-
Generator Neumorphism
Buat CSS soft UI (neumorphism): bayangan terang dan gelap yang diturunkan dari warna dasar Anda, bentuk datar, cekung, cembung, atau ditekan, dan empat arah cahaya.
-
Generator Pola CSS
Buat pola latar CSS murni – titik, polkadot, garis-garis, papan catur, kisi, zigzag, dan kisi silang – dengan warna, ukuran ubin, dan ketebalan. Tanpa gambar.
-
Generator SVG Blob
Buat bentuk blob SVG organik yang halus dengan titik, keacakan, dan seed yang bisa diatur. Isian polos, gradien, atau garis tepi; unduh .svg atau salin data URI CSS.
-
Generator Gelombang SVG
Buat gelombang SVG halus, runcing, atau bertingkat dengan lapisan, amplitudo, dan seed. Unduh .svg atau salin sebagai data URI latar CSS untuk pemisah section.
-
Generator Text Shadow
Buat efek CSS text-shadow dengan beberapa lapisan: glow, outline, 3D retro, dan teks timbul. Pratinjau langsung dengan teks Anda sendiri dan kode siap salin.
-
Generator CSS Transform
Buat nilai CSS transform: translate, rotate, scale, skew ditambah perspective 3D, rotateX/rotateY, dan translateZ, dengan transform-origin dan pratinjau langsung.
Kategori lain
- CRC Algoritma Cyclic Redundancy Check untuk deteksi kesalahan
- MD Algoritma Message Digest (MD2, MD4, MD5)
- SHA-1 Secure Hash Algorithm 1 - fungsi hash 160-bit
- SHA-2 Keluarga Secure Hash Algorithm 2 (SHA-224, SHA-256, SHA-384, SHA-512)
- SHA-3 Secure Hash Algorithm 3 berbasis Keccak
- Keccak Fungsi hash kriptografi Keccak
- SHAKE Fungsi output yang dapat diperluas (SHAKE128, SHAKE256)
- cSHAKE Fungsi SHAKE yang dapat disesuaikan
- KMAC Kode autentikasi pesan berbasis Keccak
- Kata Sandi & Keamanan Alat pembuatan, analisis, hash, dan keamanan kata sandi
- Enkripsi & Kriptografi Enkripsi simetris dan asimetris, HMAC, dan pembuatan kunci (AES, 3DES, RSA, PGP)
- Encoding Encode dan decode data: Base64, Base32, Base58, URL, entitas HTML, hex, Unicode, dan lainnya
- Pemformat Format, minify, dan validasi kode serta data (JSON, XML, YAML, SQL, HTML, CSS) dan ubah gaya penamaan
- Generator Buat ID, kunci, data uji, kode QR, barcode, dan file konfigurasi (UUID, API key, .gitignore, Dockerfile)
- Konverter Konversi format data, basis bilangan, warna, timestamp, satuan, dan mata uang (JSON, CSV, YAML, XML)
- Alat Teks Hitung, bandingkan, bersihkan, dan ubah teks (jumlah kata, diff, regex, huruf besar/kecil, duplikat)
- Alat Gambar Alat untuk memanipulasi dan mengonversi gambar (Kompres, Ubah Ukuran, Konversi)
- Alat Web Alat untuk web developer dan SEO (JWT, URL, DNS, header HTTP, meta tag, sitemap)
- Matematika & Kalkulator Kalkulator untuk keuangan, kesehatan, persentase, aritmetika programmer, dan matematika sehari-hari
- Waktu & Tanggal Zona waktu, selisih tanggal, hari kerja, timer, stopwatch, dan jam dunia