Pembuat Garis Tepi Teks
Buat teks bergaris tepi menggunakan CSS -webkit-text-stroke dengan lebar, warna, keluarga font, dan ukuran khusus - seketika dan gratis. Pilih dari 15 keluarga font, sesuaikan ketebalan dan warna garis tepi, dan lihat hasilnya langsung. Salin CSS siap produksi dengan satu klik. Sepenuhnya privat, tanpa daftar.
Preview updates in real-time as you adjust the controls
-webkit-text-stroke: 2px #000000; color: #ffffff; font-family: system-ui, -apple-system, sans-serif; font-size: 64px; font-weight: 900; -webkit-font-smoothing: antialiased;
Mengapa menggunakan pembuat garis tepi teks kami?
- Pratinjau langsung & CSS instan: pembuat garis tepi teks memperbarui pratinjau langsung dan keluaran CSS pada setiap perubahan - tanpa tombol yang perlu ditekan. Lihat teks bergaris tepi Anda persis seperti tampilannya di browser dan salin deklarasi CSS dengan satu klik.
- 15 keluarga font & ukuran khusus: pilih dari 15 keluarga font termasuk system UI, serif, monospace, display, handwriting, fantasy, dan font web populer seperti Arial, Georgia, dan Verdana. Sesuaikan ukuran font dari 12px hingga 144px dengan penggeser atau input piksel yang tepat.
- 100% privat - tanpa unggahan: seluruh pembuatan garis tepi teks terjadi lokal di browser Anda. Teks dan pilihan warna Anda tidak pernah meninggalkan perangkat dan tidak pernah dikirim ke server - aman untuk proyek klien dan tipografi merek milik sendiri.
- Gratis & tanpa batas: buat efek garis tepi tak terbatas tanpa daftar, tanpa langganan, dan tanpa batas penggunaan. Pembuat garis tepi teks sepenuhnya gratis selamanya tanpa iklan yang menghalangi antarmuka.
Kasus penggunaan umum pembuat garis tepi teks
- Thumbnail & banner YouTube: kreator video menggunakan pembuat garis tepi teks untuk membuat overlay teks tebal dan bergaris tepi untuk thumbnail dan banner kanal YouTube. Efek dua warna membuat teks menonjol di latar apa pun, meningkatkan rasio klik dan keterlibatan penonton.
- Mockup & prototipe desain: desainer UI/UX menggunakan pembuat garis tepi teks untuk mempratinjau dan memprototipekan gaya teks bergaris tepi sebelum menetapkan CSS. Ekspor kode CSS persisnya untuk diserahkan ke developer - tanpa mengutak-atik piksel atau menebak.
- Bagian hero & judul situs web: desainer web menggunakan pembuat garis tepi teks untuk membuat judul bergaris tepi yang menarik perhatian untuk bagian hero, halaman landing, dan banner ajakan bertindak. Efeknya sangat cocok di atas latar gradien dan latar video.
- Grafik media sosial & stories: kreator media sosial menggunakan pembuat garis tepi teks untuk mendesain teks bergaris tepi untuk stories, postingan, dan reels Instagram. Salin CSS atau gunakan pratinjau visual untuk membuat ulang efeknya di alat desain favorit Anda.
- UI game & desain overlay: developer game dan streamer menggunakan pembuat garis tepi teks untuk menata overlay teks UI, bar kesehatan, tampilan skor, dan notifikasi di layar. Efek garis tepi memastikan teks tetap terbaca di atas latar game yang berubah.
- Belajar & bereksperimen CSS: developer frontend dan pelajar CSS menggunakan pembuat garis tepi teks untuk bereksperimen secara real time dengan properti -webkit-text-stroke. Lihat bagaimana lebar garis tepi, warna garis tepi, dan warna teks saling berinteraksi membentuk efek visual berbeda.
Apa itu garis tepi teks CSS?
Garis tepi teks CSS (juga disebut kontur teks) adalah efek visual yang menggambar bingkai berwarna di sekitar setiap karakter teks. Efek ini dibuat menggunakan properti CSS -webkit-text-stroke, yang menetapkan lebar garis tepi (ketebalan kontur) sekaligus warna garis tepi . Dengan menetapkan warna kontur yang kontras dan warna isian yang berbeda, Anda menciptakan efek teks dua warna yang menonjol di latar apa pun. Pembuat garis tepi teks kami memungkinkan Anda bereksperimen dengan nilai-nilai ini secara visual dan menyalin kode CSS persisnya untuk digunakan di produksi.
Cara kerja pembuat garis tepi teks kami
- Masukkan teks dan pilih font: ketik atau tempel teks yang ingin ditata. Pilih keluarga font dari 15 preset dan sesuaikan ukuran font dengan penggeser atau menu. Pratinjau diperbarui secara real time.
- Sesuaikan efek garis tepi: tetapkan lebar garis tepi (0-20px) dan pilih warna garis tepi sekaligus warna isian teks dengan pemilih warna atau input hex. Aktifkan/nonaktifkan garis tepi untuk membandingkan efeknya dengan gaya teks biasa.
- Salin CSS: klik "Salin CSS" untuk menyalin deklarasi CSS siap produksi ke clipboard. Keluarannya mencakup -webkit-text-stroke, color, dan gaya font. Tempelkan langsung ke stylesheet Anda.
Dukungan browser & alternatif
- Chrome, Edge, Opera, Safari: dukungan penuh untuk -webkit-text-stroke dengan rendering halus dan anti-aliasing. Properti ini bekerja identik di semua browser berbasis Chromium dan WebKit.
- Firefox: mendukung -webkit-text-stroke sejak versi 113 untuk kompatibilitas. Versi lebih lama tidak mendukung garis tepi teks sama sekali - sediakan warna cadangan solid memakai properti color sebelum deklarasi garis tepi.
- Alternatif CSS standar: CSS Working Group telah membahas properti text-stroke standar, tetapi belum diimplementasikan di browser mana pun. Selalu gunakan awalan -webkit- untuk produksi.
Tips untuk efek garis tepi yang hebat
Untuk hasil garis tepi teks terbaik, gunakan ketebalan font tebal (700-900) - font tipis kehilangan keterbacaan saat diberi garis tepi. Tetapkan warna garis tepi jauh lebih gelap atau lebih terang daripada warna isian untuk kontras maksimal. Lebar garis tepi 1-3px cocok untuk sebagian besar ukuran font; garis tepi lebih tebal (5px ke atas) lebih cocok untuk teks tampilan 48px ke atas. Pembuat garis tepi teks menggunakan font-weight 900 secara default agar rendering optimal dengan efek garis tepi.
Pertanyaan yang Sering Diajukan
Pembuat garis tepi teks adalah alat visual yang membuat efek teks bergaris tepi menggunakan properti CSS -webkit-text-stroke. Anda dapat mengatur lebar garis tepi (0-20px), memilih warna garis tepi dan warna isian teks, memilih keluarga font dan ukuran, lalu melihat hasilnya langsung. Seluruh pembuatan berjalan sepenuhnya di browser Anda tanpa mengirim data ke server.
Properti -webkit-text-stroke didukung di Chrome 4+, Edge 12+, Safari 3.1+, dan Opera 15+. Firefox menambahkan dukungan pada versi 113. Untuk versi Firefox lama, sediakan warna cadangan solid menggunakan properti color sebelum deklarasi garis tepi.
Ya. Seluruh pembuatan garis tepi teks terjadi 100% di sisi klien, di browser Anda. Teks dan pilihan warna Anda tidak pernah dikirim ke server, tidak pernah disimpan, dan tidak pernah dikirim ke mana pun.
Ya. Pembuat garis tepi teks 100% gratis tanpa daftar, tanpa fitur premium, dan tanpa batas penggunaan. Buat efek garis tepi tak terbatas tanpa batasan atau biaya tersembunyi.
Pembuat garis tepi teks menyertakan 15 keluarga font: System UI, Sans-serif, Serif, Monospace, Display, Handwriting, Fantasy, Arial, Helvetica, Georgia, Times New Roman, Courier New, Verdana, Trebuchet MS, dan Palatino.
Warna garis tepi adalah garis luar yang digambar di sekitar tiap karakter. Warna teks adalah isian bagian dalam karakter. Dengan menetapkan keduanya ke warna berbeda, Anda menciptakan efek garis tepi dua warna. Misalnya, teks putih dengan garis tepi hitam menghasilkan tampilan tebal dan berkontras tinggi.
Lebar garis tepi 1-3px cocok untuk sebagian besar teks isi dan judul. Untuk teks tampilan (48px ke atas), lebar 3-8px menciptakan efek tebal. Pembuat garis tepi teks memungkinkan Anda mengatur dari 0px (tanpa garis tepi) hingga 20px (garis tepi sangat tebal) dengan kenaikan 0,5px.
Bisa. Pembuat garis tepi teks menghasilkan CSS yang menyertakan deklarasi font-family. Anda dapat mengganti nilai font-family dengan Google Font atau font web khusus apa pun. Properti -webkit-text-stroke bekerja dengan font apa pun, meski font tampilan tebal memberikan hasil garis tepi terbaik.