75 Alat Kecil Berbasis Web untuk Desainer Web

75 Alat Kecil Berbasis Web untuk Desainer Web

Semua dirilis pada tahun lalu atau lebih, masing-masing aplikasi berbasis web gratis ini menawarkan solusi hemat waktu untuk banyak tugas desain web yang perlu Anda lakukan dari waktu ke waktu. Tanpa harus menginstal apapun, yang harus Anda lakukan adalah menandai dan menyimpannya untuk hari ketika mereka akan dipanggil.

Beberapa penghemat waktu kecil ini akan membantu Anda mengelola koleksi ikon SVG dengan lebih baik, mengatur potongan kode, membuat gambar profil secara acak, menghasilkan animasi CSS, atau bahkan menerjemahkan pemilih CSS ke dalam bahasa Inggris.

Apa pun penghemat waktu desain web yang Anda cari, kemungkinan besar Anda akan menemukannya di sini.

Alat Tata Letak CSS

Pembuat Tata Letak CSS – Buat tata letak ideal Anda dalam hitungan detik dengan alat CSS online yang praktis ini.
Pembuat Tata Letak CSS


Layoutit Grid – Bangun Grid CSS ideal Anda dengan alat online ini.
Layoutit Grid css alat berbasis web contoh desain web gratis


Generator Grid Majemuk – Masukkan jumlah kolom untuk setiap kisi Anda, dan mereka akan digabungkan secara ajaib menjadi kisi gabungan.
css Compound Grid Generator contoh desain web gratis alat berbasis web

Alat CSS Berbasis Web

HalusBayangan – Gunakan alat online ini untuk menghasilkan bayangan kotak CSS yang sangat halus.
HalusBayangan


Pembuat Garis CSS – Gunakan alat berbasis browser ini untuk membuat pola bergaris yang indah.
Pembuat Garis CSS


Neumorphism.io – Alat untuk membuat kode CSS Soft-UI.
Contoh desain web gratis alat berbasis web Neumorphism css


zerodivs.com – Coba editor UI eksperimental ini untuk membuat ilustrasi berdasarkan gaya penerapan (CSS) pada satu elemen HTML.
contoh desain web gratis alat editor UI eksperimental css berbasis web


CSS clip-path Editor – Alat online ini akan membantu Anda menghasilkan jalur klip yang mengagumkan.
CSS clip-path Editor alat berbasis web contoh desain web gratis

Pembuat Pola Berbasis Web

Pola Latar Belakang CSS – Temukan latar belakang favorit baru Anda dengan generator CSS gratis ini.
Pola latar belakang CSS


Repositori Pola Dasar – Kumpulan pola SVG sederhana dan mulus yang dapat Anda salin dan tempel ke dalam proyek.
Repositori Pola Dasar


berpola – Alat berbasis web untuk membuat pola mulus untuk proyek Anda.
patternico pola alat berbasis web contoh desain web gratis


PolaPad – Aplikasi untuk membuat pola yang dapat diekspor menggunakan variasi tanpa akhir.
Contoh desain web gratis alat berbasis web PatternPad


Generator Pola Dingbats yang Indah – Buat pola yang mulus dan bebas royalti untuk digunakan dalam proyek Anda.
Contoh desain web gratis Dingbats Pattern Generator alat berbasis web yang indah


Pola Latar Belakang CSS – Hasilkan pola latar belakang mulus Anda sendiri.
CSS Background Patterns alat berbasis web contoh desain web gratis

Alat Warna Berbasis Web

couleur.io – Generator online untuk membantu Anda membuat palet warna yang “menyelaraskan”.
couleur.io


Pencampur Warna Parametrik – Buat palet warna kustom Anda sendiri dan ekspor ke CSS atau SVG.
Contoh desain web gratis alat berbasis web Parametric Color Mixer

Generator & Alat Gradien Berbasis Web

Editor Gradien CSS Tingkat Lanjut – Aplikasi desain gradien CSS gratis ini penuh dengan fitur yang berguna.
Editor Gradien CSS Tingkat Lanjut


uiGradien – Temukan gradien favorit Anda dengan koleksi gaya salin dan tempel ini.
uiGradien


kerucut.css – Koleksi gradien kerucut salin dan tempel untuk menyempurnakan proyek Anda.
kerucut.css


Gradihunt – Temukan atau hasilkan gradien CSS yang sempurna untuk proyek Anda.
Gradihunt CSS gradien alat berbasis web contoh desain web gratis


Gradien CSS Multiwarna – Latar belakang gratis, ringan, penuh warna, dan responsif untuk digunakan dalam proyek Anda.

Contoh desain web gratis alat berbasis web Multicolor CSS Gradients


grxdients – Pustaka CSS yang membuat penambahan gradien ke proyek Anda menjadi sangat sederhana.
  contoh desain web gratis alat berbasis web

Generator & Alat Glassmorphism

Generator CSS Glassmorphism – Buat efek kaca yang indah dengan bantuan alat praktis ini.
Generator CSS Glassmorphism


Pembuat Efek CSS Glassmorphism – Buat efek kaca menakjubkan Anda sendiri, salin kodenya dan bersiaplah.
Pembuat Efek CSS Glassmorphism

Alat SVG Berbasis Web

Pembuat Kode Faux – Alat untuk mengubah kode asli (GitHub Gists) menjadi SVG kode palsu.
Contoh desain web gratis alat Faux Code Generator berbasis web


Konversi2Svg – Alat berbasis web sederhana untuk mengonversi gambar multi-warna ke file SVG.

Contoh desain web gratis alat berbasis web Convert2Svg


Warp SVG Online – Unggah file SVG Anda dan gunakan alat online ini untuk melengkungkannya.
Contoh desain web gratis alat berbasis web Warp SVG Online


SVGBox – API ini membuatnya sangat sederhana untuk menyertakan ikon SVG dalam proyek Anda.
SVGBox svg api alat berbasis web contoh desain web gratis

Alat Pemuat & Pemintal

Pemuat Pemuat – Bangun pemuat khusus untuk aplikasi Bereaksi Anda dengan alat ini.
Loader Generator bereaksi alat berbasis web css contoh desain web gratis


Pemintal Bereaksi – Alat untuk (Anda dapat menebaknya) menghasilkan pemintal animasi di React.
  contoh desain web gratis alat berbasis web

Generator Tangkapan Layar

limus – Unggah tangkapan layar Anda dan alat ini akan memungkinkan Anda melihat dan menyimpannya pada sudut yang berbeda.
Spinners React contoh desain web gratis alat berbasis web css


Cuplikan Foto – Alat berbasis web yang menghasilkan tangkapan layar dari cuplikan kode Anda.
Contoh desain web gratis alat berbasis web Snippet Shot

Pembuat Ikon & Alat

ikonify – Unggah gambar Anda dan biarkan alat ini menghasilkan serangkaian ikon aplikasi khusus.
ikonify


Periksa Favicon – Alat ini akan menunjukkan kepada Anda bagaimana tampilan favicon situs Anda di berbagai perangkat.
Periksa Favicon


IkonDapur – Buat ikon aplikasi kustom Anda sendiri dengan generator online ini.
IkonDapur


kumpulan ikon – Aplikasi untuk mengatur ikon SVG Anda dengan lebih baik.
Iconset SVG ikon alat berbasis web contoh desain web gratis


Pembuat Favicon SVG – Buat favicon SVG Anda sendiri yang dapat diskalakan dengan alat online ini.
SVG Favicon Maker alat berbasis web contoh desain web gratis


Gerakan – Buat ikon animasi dengan aplikasi ini, tersedia untuk Mac OS dan Windows.
Ikon animasi gerak contoh desain web alat berbasis web gratis


pengubah ikon – Hasilkan resolusi ikon yang tepat untuk semua perangkat.
Contoh desain web gratis alat berbasis web Iconsizer

Tipografi & Alat Font Berbasis Web

Tipografi Cairan – Buat teks yang diskalakan dengan ukuran jendela, sehingga judul Anda terlihat bagus di layar mana pun.
Tipografi cairan


3DPop – Alat online ini akan membantu Anda menghasilkan efek teks 3D yang mengagumkan menggunakan CSS.
3DPop


Jenis Generator Penjepit Skala – Gunakan alat ini untuk membuat skala tipografi responsif yang sempurna dengan CSS.
Jenis Generator Penjepit Skala


Primer Font Variabel – Pelajari semua yang Anda butuhkan untuk memanfaatkan fenomena tipografi ini.
Contoh desain web gratis alat berbasis web Variable Fonts Primer


Terbalik – Alat online untuk mendefinisikan tipografi dalam CSS.
Contoh desain web gratis alat berbasis web terbalik


gunakanFont – Cobalah alat desain ini untuk membantu desainer dan pengembang memilih font yang sempurna.
useFonts alat berbasis web contoh desain web gratis


Yang baik line-height – Gunakan alat ini untuk dengan mudah menghitung tinggi baris CSS yang sempurna untuk setiap ukuran teks dalam skala Anda.
line-height css tipografi alat berbasis web contoh desain web gratis


Spasi putih – Sumber daya salin & tempel yang praktis untuk berbagai jenis ruang.
Contoh desain web gratis alat berbasis web spasi putih

Aplikasi & Alat Filter Gambar

Pembuat Filter CSS – Tambahkan efek filter yang menarik ke gambar Anda dengan alat online ini.
Pembuat Filter CSS


Filter Foto CSS – Unggah gambar Anda dan alat ini menyediakan 36 filter CSS yang dapat Anda gunakan.
Filter Foto CSS


campuran ekor – Gunakan alat online ini untuk membuat mode perpaduan foto yang indah untuk Tailwind CSS.
campuran ekor

Alat Animasi Berbasis Web

gambar animasi – Gunakan alat ini untuk membuat maket animasi gratis dari perangkat populer.
Contoh desain web gratis mockup animasi gratis alat berbasis web Animockup


Keyframes.app – Hasilkan animasi CSS yang mengagumkan dengan alat berbasis web ini.
Keyframes CSS animasi alat berbasis web contoh desain web gratis


kemudahan – Uji dan buat kurva easing Cubic Bezier dengan generator ini.
Easings Cubic Bezier kurva easing alat berbasis web contoh desain web gratis

Gambar Profil & Generator Avatar

kepala besar – Pustaka yang secara acak menghasilkan karakter untuk aplikasi dan game Anda.
Contoh desain web gratis alat karakter Big Heads berbasis web


Multiavatar – Hasilkan avatar kustom Anda sendiri dengan alat ini.
Contoh desain web gratis alat berbasis web avatar kustom multiavatar

Alat Pembelajaran Berbasis Web

Pelajari Pemosisian CSS – Artikel interaktif untuk membantu Anda mempelajari cara memposisikan elemen.
Pelajari CSS Positioning alat berbasis web contoh desain web gratis


iHateRegex – Lembar contekan ekspresi reguler untuk pembenci.
lembar contekan ekspresi reguler alat berbasis web contoh desain web gratis


Pelajari Penjajaran Kotak – Dapatkan informasi tentang cara kerja penyelarasan untuk CSS Grid dan Flexbox.
Pelajari Box Alignment alat berbasis web contoh desain web gratis


Selector Dijelaskan – Terjemahkan pemilih CSS ke dalam bahasa Inggris biasa.
pemilih css Menjelaskan contoh desain web gratis alat berbasis web


Lembar Cheat Grid – Referensi praktis untuk mempelajari seluk-beluk CSS Grid.
css Grid Cheatsheet alat berbasis web contoh desain web gratis


Penjelajah Perintah Git – Sumber daya yang berguna untuk membantu Anda menemukan perintah Git yang tepat.
Contoh desain web gratis alat berbasis web Git Command Explorer


Tuan Rumah Rider – Gunakan permainan CSS yang menyenangkan ini untuk mempelajari lebih lanjut tentang justify-content Properti.
Contoh desain web gratis alat berbasis web Host Rider

Alat Pencatat & Editor Teks

cerewet – Editor teks sumber terbuka gratis dengan berbagai gaya dan opsi ekspor.
Contoh desain web gratis alat berbasis web Writty


secara mencolok – Cobalah editor teks kaya yang elegan ini dengan dukungan penurunan harga penuh. Tersedia sebagai aplikasi berbasis browser dan asli.
Contoh desain web gratis alat berbasis web yang luar biasa


coretan – Alat tulis yang berfokus pada kesederhanaan, sehingga Anda dapat fokus pada pekerjaan Anda.
Contoh desain web gratis alat berbasis web Scribbble

Alat Berbasis Web yang Berguna

Placeholder Gambar Cepat & Sederhana – Gunakan alat ini untuk menghasilkan placeholder gambar berwarna.
Contoh desain web gratis alat berbasis web Placeholder Gambar


Tes Kecepatan Gambar – Alat yang menganalisis gambar situs Anda dan menawarkan saran untuk meningkatkan kinerja.
Contoh desain web gratis alat berbasis web Tes Kecepatan Gambar


SocialSizes.io – Sumber daya untuk ukuran gambar dan video media sosial – lengkap dengan template yang dapat diunduh.
SocialSizes ukuran gambar dan video media sosial alat berbasis web contoh desain web gratis

Bagikan & Tampilkan Cuplikan Kode

kode snap – Alat online untuk menyimpan dan mengatur cuplikan kode.
kode snap


Ray.so – Gunakan alat ini untuk membuat gambar yang indah dari cuplikan kode Anda.
Ray.so


indiepen – Bagikan cuplikan kode yang disematkan dengan solusi contoh kode yang ramah privasi ini.
indiepen

Repobeat – Tambahkan wawasan yang sangat visual ke repositori GitHub Anda dengan alat ini.
Repobeat


README Gen – Gunakan alat ini untuk menghasilkan profesional README file untuk proyek GitHub Anda.
README Gen


Generator README Profil GitHub – Gunakan alat ini untuk membangun profil GitHub pribadi Anda.
Generator README Profil GitHub


Sosialisasi GitHub – Pamerkan proyek Anda ke dunia dengan menghasilkan gambar proyek yang indah dengan alat ini.
GitHub Mensosialisasikan alat berbasis web contoh desain web gratis


Aplikasi Memo – Tulis catatan di GitHub Gist.
Contoh desain web gratis alat berbasis web Memo App

…dan akhirnya…

Lelucon Ayah Dev – Aplikasi kecil konyol yang menambahkan sedikit humor ekstra ke dunia pengembang.
Lelucon Ayah Dev


Web yang Tidak Berguna – Punya waktu luang? Mengapa tidak menggunakan sumber daya ini untuk menemukan beberapa situs web yang tidak berguna untuk dikunjungi?
Contoh desain web gratis alat berbasis web yang tidak berguna

Hit play on your imagination