CSS Scroll-Driven Animation Generator Generate production-ready CSS that animates elements as the user scrolls, using the modern animation-timeline: view() and scroll() properties. Pick an animation type, target selector, timeline, axis, and range — then copy a clean stylesheet with an optional @supports fallback for older browsers. How to Use Pick an animation type — fade, ...
Coba Alat »CSS Design Token Generator Turn a single brand hex color into a complete, opinionated CSS custom-property token system. The tool generates an 11-stop perceptually uniform palette in OKLCH space (50 through 950) and layers a semantic token system on top so you can drop the output straight into a design system or component library. Unlike ...
Coba Alat »Penghasil Kueri Media CSS Buat aturan @media CSS yang tepat untuk setiap titik potong dan kombinasi fitur tanpa harus menghafal sintaks. Pilih preset kerangka kerja, pilih jenis kueri, dan aktifkan fitur media tambahan yang Anda butuhkan — alat ini menyambungkan blok yang valid dengan sintaks klasik dan modern. Cara Menggunakan Pilih Kerangka Kerja ...
Coba Alat »Penghasil Latar Belakang CSS Aurora/Grafiti Blok Buatkan latar belakang berbentuk aurora yang lembut dengan hingga empat bola berwarna yang bisa digeser, diubah warna, dan diubah ukuran pada canvas yang berjalan secara real-time. Alat ini menghasilkan kode CSS siap digunakan menggunakan radial-gradient dan filter: blur(), atau SVG portabel menggunakan feGaussianBlur — sehingga Anda bisa menempatkan hasilnya langsung ke situs web, landing page...
Coba Alat »Generator Efek Filter SVG Desain efek filter SVG secara visual. Pilih primitif filter — blur Gaussian, variasi matriks warna (rotasi hue, saturasi, luminance ke alpha), turbulensi dengan pergeseran, bayangan drop, atau preset matriks konvolusi (emboss, engrave, sharpen, edge detect) — dan sesuaikan parameter dengan slider sambil melihat pratinjau SVG langsung pada teks, ...
Coba Alat »Penghasil Animasi Muat CSS Buat delapan animasi muat populer dalam CSS murni — cincin berputar, dua cincin, titik berdenyut, titik bergerak, bola bergetar, batang equalizer, lingkaran berdenyut, dan indikator ketik. Sesuaikan warna, ukuran, lebar garis, dan durasi; lihat pratinjau langsung berubah secara instan; salin @keyframes + HTML minimal ke proyek Anda. Tidak ada JavaScript, tidak ada ...
Coba Alat »Penghasil Gangguan dan Tekstur SVG Buat gangguan organik yang kasar dan tekstur awan yang tidak teratur secara langsung di browser Anda menggunakan filter feTurbulence SVG. Geser slider, sesuaikan benih, pilih warna penyesuaian, dan lihat tekstur diperbarui secara langsung. Ekspor sebagai SVG inline, URL data gambar latar belakang CSS, atau filter SVG yang dapat digunakan kembali...
Coba Alat »Penghasil Kode Warna Terminal ANSI Membangun urutan escape ANSI (Pilih kode Grafik Rendition) untuk memberi warna dan gaya pada keluaran terminal. Pilih warna latar belakang dan depan, aktifkan gaya seperti tebal atau garis bawah, dan dapatkan string escape siap dipaste serta pratinjau langsung bagaimana tampilan di terminal. Cara Penggunaan Ketik teks contoh ...
Coba Alat »Generator Lembar Warna Tempel daftar warna dan segera lihat mereka sebagai lembar warna yang dapat dicetak dengan label heksadesimal. Gabungkan format warna CSS apa pun yang Anda sukai — hex pendek dan panjang, rgb(), rgba(), hsl(), hsla(), atau warna bernama seperti tomato — lalu unduh lembar tersebut sebagai PNG beresolusi tinggi atau skala ...
Coba Alat »Pengubah Ruang Warna Terpadu Tempel warna dalam format apa pun yang umum dan segera lihat representasinya di sembilan ruang warna secara samping. Pengubah ini secara otomatis mendeteksi HEX, RGB, HSL, HSV/HSB, CMYK, CIE LAB, LCH, CIE XYZ, Oklab, dan warna bernama CSS, lalu menghitung representasi lainnya menggunakan koreksi gamma sRGB dan standar D65 ...
Coba Alat »Pengubah Tekstil & Kain Perbandingan ukuran jarum tenun, ukuran gunting kain, dan kategori berat kain antara standar AS, UK/Canada, metrik, dan Jepang dalam satu tempat. Berguna ketika pola dari satu negara menyebutkan ukuran jarum atau nama kain yang tidak sesuai dengan yang tercantum pada suplai lokal Anda. Cara Penggunaan Pilih kategori...
Coba Alat »Generator Tekstur Gradien CSS Buat efek teks yang menarik dengan gradien berwarna ganda dan hasilkan kode CSS siap digunakan dalam satu klik. Pilih warna, pilih linear atau radial, lihat pratinjau langsung, lalu salin snippet ke dalam stylesheet Anda. Cara Penggunaan Masukkan teks sampel yang ingin dipreview. Tetapkan ukuran dan bobot font...
Coba Alat »Generator Gambar Kartu Sosial Open Graph Buat gambar bagikan sosial yang presisi pixel demi pixel untuk Open Graph, Twitter Cards, LinkedIn, dan Facebook langsung di browser Anda. Masukkan judul, deskripsi, dan nama situs, pilih tata letak dan tema, lalu unduh dalam format PNG, JPG, atau WebP dengan dimensi tepat yang diharapkan setiap platform — tanpa perlu alat desain atau unggah...
Coba Alat »Generator CSS Neumorf Buat elemen antarmuka yang lembut dan terdorong tanpa harus menyesuaikan dua bayangan kotak secara manual. Pilih warna dasar, pilih bentuk (datar, cekung ke dalam, cekung ke luar, atau ditekan), geser slider untuk jarak, intensitas, blur, dan sudut cahaya, lalu salin kode CSS yang dihasilkan langsung ke proyek Anda. Cara Penggunaan Pilih warna latar belakang. Warna yang sama...
Coba Alat »Generator Warna Tint & Shade Pilih warna hex atau RGB dan segera dapatkan 10 tint (warna Anda dicampur dengan putih) dan 10 shade (dicampur dengan hitam) sebagai sampel visual. Klik salah satu sampel untuk menyalin kode hex-nya, atau ekspor seluruh set sebagai properti CSS, variabel SCSS, JSON, atau daftar hex sederhana...
Coba Alat »Generator Skala Warna Tailwind CSS Tempel satu warna hex dan segera dapatkan skala penuh berdasarkan Tailwind dengan langkah yang merata secara persepsi. Skala ini dibangun dalam ruang warna OKLCH, sehingga setiap tahap terasa seperti peningkatan kecerahan yang merata bagi mata manusia — bukan hanya penurunan linear pada RGB atau HSL. ...
Coba Alat »Kanvas Seni Pixel & Ekspor CSS Impor sprite ber gaya 8-bit yang tajam secara langsung di browser Anda dan ekspor sebagai seni CSS box-shadow, SVG yang dapat diperbesar, PNG raster, atau JSON portabel. Kanvas ini dapat diatur dari ukuran 8×8 hingga 64×64, dilengkapi dengan palet klasik (NES, Game Boy, PICO-8, CGA, Commodore 64, Sweetie 16), serta memberikan fitur menggambar, penghapus, ...
Coba Alat »Pengvisualisasi & Editor Path SVG Tempel atribut path apa saja dari SVG dan lihat hasilnya secara langsung. Alat ini memecah setiap perintah menjadi parameter dan titik akhir absolut, menggambar tangan kontrol Bezier di atas tampilan pratinjau, dan menulis ulang path antara koordinat absolut dan relatif dengan presisi yang dapat dikonfigurasi. Alat ini dibangun khusus untuk penulis SVG ...
Coba Alat »Generator CSS Flexbox (Visual) Desain tata letak Flexbox secara visual dan salin CSS siap digunakan. Sesuaikan arah, penyesuaian, penggabungan, jarak, dan peraturan per-item sambil pratinjau langsung diperbarui secara instan. Tidak perlu menebak, tidak perlu pergi ke Chrome DevTools — cukup pilih perilaku container yang dibutuhkan, lihat hasilnya, dan ambil aturan yang dihasilkan. Cara Penggunaan Pilih arah flex (baris, ...
Coba Alat »Penghasil Logo README Generator Penghasil Logo README Generator membuat badge berukuran piksel-ke-piksel seperti Shields.io secara langsung di browser Anda. Pilih preset atau buat label dan pesan Anda sendiri, pilih warna dan gaya (flat, flat-square, for-the-badge, atau plastic), serta dapatkan output Markdown, HTML, SVG, dan URL data yang siap digunakan. Tidak ada panggilan API eksternal, tidak ada ketergantungan jaringan, tidak ada badge yang rusak...
Coba Alat »Tambahkan alat IO ke browser favorit Anda untuk akses instan dan pencarian lebih cepat
Papan Skor adalah cara yang menyenangkan untuk melacak permainan Anda, semua data disimpan di browser Anda. Lebih banyak fitur akan segera hadir!
Memperbarui: Kita alat terbaru was added on Jun 23, 2026
Bantu kami untuk terus menyediakan alat gratis yang berharga
