Generator Teks Neon

Ketik teks, lihat menyala seperti papan neon, lalu simpan sebagai PNG dan CSS

Generator teks neon menampilkan tulisan Anda seperti papan neon yang tergantung di dinding. Ketik teks, pilih warna tabung dan font, lalu papan di panggung langsung berubah. Jika tabung bingkai dinyalakan, tabung persegi yang mengelilingi teks ikut menyala dengan warna lain. Tombol daya mematikan lampu, sehingga Anda bisa melihat papan di siang hari saat hanya warna kaca tabungnya yang tersisa.

Papan yang sudah jadi bisa dibawa dengan dua cara. Simpan PNG menghasilkan gambar lengkap dengan dinding, atau gambar berlatar transparan yang hanya berisi cahaya. Salin kode memberi CSS yang bisa langsung ditempel pada judul halaman web. Cahaya di CSS berupa tujuh lapis bayangan dalam satuan em yang ikut membesar bersama ukuran teks, dan PNG menggambar ulang bayangan yang sama di kanvas, sehingga cahayanya sama dengan pratinjau.

Kapan dipakai

• Sebelum menentukan tulisan papan: lihat dulu pemenggalan baris, font, dan kombinasi dua warna tabung di atas dinding gelap. Dengan daya dimatikan, Anda juga bisa melihat tampilannya saat lampu padam di siang hari.
• Judul bercahaya untuk thumbnail dan video: pilih dinding transparan dan simpan dalam 1920×1080, maka hasilnya berupa teks bercahaya yang langsung bisa ditumpuk di aplikasi penyunting video.
• Judul halaman web bergaya neon: cukup salin kode dan tempel. Karena bayangan memakai em, perbandingan cahaya tetap sama walau ukuran judul diubah.
• Undangan, poster, dan foto profil: tempatkan ucapan ulang tahun atau nama toko yang bercahaya pada bidang persegi 1080×1080.

Langkah membuat

1. Teks: masukkan sampai 3 baris dengan pemisah baris, maksimal 24 karakter per baris. Menekan contoh papan mengganti teks, warna, dan font sekaligus.
2. Font: Tabung neon adalah sans-serif geometris untuk papan toko, sedangkan Tulisan neon adalah tulisan tangan bersambung bergaya neon. Keduanya mencakup huruf Latin, sehingga aksen dan huruf biasa tampil sebagaimana mestinya.
3. Warna tabung: tekan salah satu dari delapan warna tabung, atau pilih sendiri dari lingkaran pelangi. Tabung bingkai dinyalakan terpisah dan bisa diberi warna yang berbeda.
4. Kekuatan cahaya, kedipan, dinding: kekuatan cahaya 1–10, kedipan Tidak ada, Sesekali, atau Papan rusak, dan dinding Bata, Beton, Gelap, atau Transparan.
5. Simpan: pilih ukuran PNG lalu tekan Simpan PNG, atau bawa CSS dengan Salin kode. Salin tautan menaruh pengaturan saat ini setelah tanda # di alamat, sehingga bisa dibuka lagi persis sama.

Cahaya neon dibuat dari tujuh lapis bayangan

text-shadow di CSS dapat menumpuk bentuk huruf sebagai bayangan buram berkali-kali. CSS Text Decoration 3 menafsirkan nilai bayangan seperti box-shadow dan menetapkan bahwa bayangan pertama berada di paling atas, sedangkan CSS Backgrounds 3 menetapkan agar keburaman digambar mendekati keburaman Gauss dengan simpangan baku setengah dari radius. Alat ini menumpuk dua bayangan putih yang tipis di atas dan lima bayangan berwarna yang makin lebar di bawahnya, sehingga bagian tengah tampak putih menyala dan warna merembes ke luar seperti tabung neon. Hurufnya sendiri diwarnai dengan warna tabung yang dicampur 78% putih.

Satu em sama dengan ukuran font elemen itu. Karena itu, kode yang sama dipakai pada judul 32px atau 120px akan menghasilkan ketebalan cahaya yang sebanding dengan hurufnya. Jika bayangan dikunci dalam px, cahaya terlihat makin tipis saat huruf diperbesar, dan menutupi huruf saat huruf diperkecil.

Saat kekuatan cahaya diubah, radius lima lapis cahaya warna menjadi kekuatan ÷ 5 kali, sedangkan dua lapis inti putih berubah lebih kecil, yaitu 0,6 + 0,4 × (kekuatan ÷ 5) kali. Grafik penampang cahaya di area kerja menunjukkan kekuatan cahaya yang tersisa makin jauh dari tengah goresan, saat tujuh lapis ditumpuk pada satu goresan setebal 0.1em.

Bayangan tidak memengaruhi tata letak teks (CSS Text Decoration 3), sehingga di sekeliling judul perlu disediakan ruang kosong sebesar jarak sebaran cahaya. Pada judul 64px dengan kekuatan 5, cahaya merembes sedikit lebih dari 50px ke atas dan ke bawah.

PNG menggambar ulang cahaya yang sama di kanvas

Standar HTML menetapkan keburaman bayangan kanvas sebagai keburaman Gauss dengan σ setengah dari nilai shadowBlur. Hubungannya sama dengan radius buram di CSS, jadi alat ini menggambar bayangan dengan radius yang sama seperti CSS (ukuran teks × nilai em) mulai dari lapisan paling bawah, lalu mewarnai hurufnya paling akhir. Pada tabung bingkai, bayangan luar hanya digambar di luar kotak dan bayangan dalam hanya di dalam kotak, sehingga bentuknya sama dengan box-shadow di CSS. Sebagian peramban membatasi keburaman bayangan kanvas, jadi lapisan yang sangat lebar digambar di kanvas yang lebih kecil dengan keburaman sebanding lalu diperbesar kembali sehingga σ tetap sama. Jika disimpan saat daya mati, PNG menampilkan papan yang padam.

Pola bata dan beton sama dengan pratinjau dan digambar dengan diperbesar sesuai ukuran teks, jadi komposisi yang terlihat di panggung ikut tersimpan. Jika Transparan dipilih, dinding dan bayangan tepinya dihilangkan, dan hanya teks serta cahaya yang tersisa. Cahaya bersifat semitransparan sehingga tampak pudar di penampil gambar berlatar putih, tetapi saat ditumpuk di atas foto atau video yang gelap, cahayanya sama seperti di panggung.

Kedipan dan batas peka cahaya

Kriteria Keberhasilan 2.3.1 pada WCAG 2.2 mensyaratkan halaman web tidak berkedip lebih dari tiga kali per detik, atau kedipannya berada di bawah ambang kilatan umum dan kilatan merah. Kilatan di sini adalah sepasang perubahan terang yang naik dan turun sekurang-kurangnya 10% dari luminans relatif maksimum, dan luasnya diperkirakan dengan persegi 341×256 piksel pada layar 1024×768 sebagai pendekatan bidang pandang 10 derajat. Papan yang besar bisa melebihi luas itu, karena itu alat ini merancang kedipan agar mematuhi batas jumlah, apa pun luasnya.

Jumlah dihitung dengan menganggap satu lembah sebagai kecerahan (opasitas) yang turun 0,1 atau lebih lalu naik lagi 0,1 atau lebih, dengan siklus berulang disambung, dan nilainya adalah yang terbesar pada jendela 1 detik mana pun. CSS yang disalin juga memuat aturan prefers-reduced-motion. MDN menjelaskan fitur media ini sebagai pendeteksi apakah perangkat diatur untuk mengurangi gerakan yang tidak penting. Bagi pengunjung dengan pengaturan itu, papan tampil menyala tanpa berkedip. Pratinjau dan penyalaan daya di area kerja ini juga tidak bergerak jika pengaturan yang sama aktif. Saat daya dinyalakan atau contoh maupun kedipan diganti, kedipan berhenti sedikitnya 1 detik lalu mulai lagi dari awal (setelah efek menyala, 0,6 detik sesudah efek itu selesai), dan efek menyala dilewati jika papan sedang berkedip, sehingga saat pergantian pun tidak lebih dari 2 kali per detik.

Warna papan neon sungguhan

Britannica menjelaskan bahwa gas neon murni memancarkan cahaya jingga kemerahan, sedangkan gas lain dan kombinasinya menghasilkan warna yang berbeda. Jika uap raksa dimasukkan ke tabung, cahayanya kebiruan. Semuanya disebut papan neon, tetapi warna selain jingga kemerahan tidak dihasilkan neon saja. Warna tabung di bawah adalah nilai yang dipilih di layar (sRGB), jadi saat memesan papan, bandingkan dengan contoh warna fisik dari pembuatnya.

Warna inti huruf adalah nilai merah, hijau, dan biru warna cahaya yang masing-masing digeser 78% ke arah putih (255). Contoh: hijau 45 pada merah muda terang → 45 + (255 − 45) × 0,78 = 208,8 → 209 (D1).

Kesalahan yang sering terjadi

• Bayangan dikunci dalam px: jika dipasang pada judul berukuran lain, perbandingan cahayanya rusak. Kode alat ini memakai em, jadi cukup ubah font-size.
• Langsung dipasang di latar terang: cahaya berupa warna semitransparan sehingga nyaris tak terlihat di latar putih. Gelapkan bagian belakang judul atau letakkan di atas pita gelap.
• Cahaya terpotong: bayangan tidak memperlebar kotak teks, sehingga jika elemen induk berisi overflow:hidden atau tidak ada ruang kosong, cahaya terpotong tajam seperti dipangkas. Sediakan ruang kosong sebesar jarak sebaran pada tabel di atas.
• Kedipan terlalu cepat: jika keyframes diubah sendiri hingga berkedip lebih dari tiga kali per detik, batas peka cahaya terlampaui. Jangan juga menghapus aturan pengurangan gerakan.

Batasan dan catatan

• Grafik penampang cahaya dan jarak sebaran adalah perkiraan untuk satu goresan setebal 0.1em. Jika goresan lebih tebal atau huruf rapat, cahaya bertumpuk dan tampak lebih terang dan lebih lebar.
• Sans-serif, serif, dan monospace digambar dengan font yang terpasang di perangkat, sehingga bentuknya berbeda antarperangkat, dan PNG disimpan dengan font perangkat yang sedang dipakai.
• Jumlah kedipan adalah perkiraan yang dihitung dari perubahan opasitas. Penilaian kilatan WCAG memakai luminans relatif dan luas pada layar sebenarnya, sehingga untuk layar besar lebih aman memakai tanpa kedipan.
• Ukuran papan sungguhan, panjang tabung, harga, dan daya listrik tidak dihitung.

Acuan: kalimat terkait pada standar dan dokumen di bawah dicek pada 2026-10-20. Angka pada tabel sama dengan perhitungan alat ini.

Sumber

• 01W3C — CSS Backgrounds and Borders Module Level 3Keburaman box-shadow: mendekati keburaman Gauss dengan simpangan baku setengah dari radius (dalam 5% per piksel)
• 02W3C — CSS Text Decoration Module Level 3, text-shadowNilai ditafsirkan seperti box-shadow, bayangan pertama di paling atas, bayangan tidak memengaruhi tata letak dan area gulir
• 03WHATWG — HTML Living Standard, bayangan kanvasKeburaman Gauss dua dimensi dengan σ setengah dari shadowBlur
• 04W3C — WCAG 2.2, 2.3.1 Tiga kilatan atau di bawah ambangTidak berkedip lebih dari tiga kali per detik, definisi kilatan umum (10% luminans relatif maksimum, 0,80), pendekatan 341×256 piksel
• 05MDN — prefers-reduced-motionFitur media yang mendeteksi apakah perangkat diatur untuk mengurangi gerakan yang tidak penting
• 06Britannica — Neon lampNeon murni jingga kemerahan, gas lain dan kombinasinya warna lain, uap raksa kebiruan
• 07Google Fonts — Tilt NeonAndy Clymer, font yang terinspirasi huruf papan toko, OFL
• 08Google Fonts — NeonderthawRobert Leuschke, tulisan sambung yang meniru neon, OFL
• 09SIL — OFL FAQ1.1 Boleh dipakai pada karya desain seperti logo, poster, dan papan tanpa izin tambahan

Pertanyaan yang sering diajukan

Alat yang dipakai bersama