⭐ 0
🔍
Teks Gambar PDF & Dokumen Audio Musik Elektronika Waktu Utilitas Validator Esoterik Game

Generator Efek Teks CSS

Ketik teks Anda sendiri dan lihat langsung efek CSS neon glow, 3D-extrude, letterpress, outline, dan gradient-fill, dengan parameter yang dihitung oleh matematika sebenarnya dan blok CSS yang bisa disalin.

🔒 Diproses sepenuhnya di browser Anda — apa pun yang Anda masukkan di sini tidak akan pernah diunggah.

Memproses... 0%

Hasil

Kebanyakan galeri efek teks CSS memberi Anda preset tetap: satu neon glow, satu ekstrusi 3D, terima apa adanya. Generator ini membuat CSS dari parameter Anda, pada teks yang Anda ketik sendiri. Pilih neon glow, 3D-extrude, letterpress/emboss, outline, atau gradient-fill dari menu efek, sesuaikan kontrol efek itu sendiri, dan pratinjau langsung serta blok CSS yang bisa disalin di bawahnya akan diperbarui setiap kali ada perubahan.

Efek 3D-extrude adalah yang layak dipahami: untuk kedalaman (jumlah lapisan bertumpuk) dan sudut yang dipilih, lapisan ke-i diimbangi sebesar i × cos(sudut) secara horizontal dan i × sin(sudut) secara vertikal, dihitung dengan JavaScript menggunakan fungsi trigonometri sebenarnya — bukan dibaca dari tabel lookup sudut preset. Pada 45 derajat offset horizontal dan vertikal bernilai sama untuk setiap lapisan, karena cosinus dan sinus 45° memiliki nilai yang sama; putar slider sudut dan saksikan seluruh tumpukan lapisan `text-shadow` berputar mengelilingi huruf secara real time, masing-masing sedikit lebih gelap dari sebelumnya untuk meniru permukaan 3D yang tersinari.

Neon glow menumpuk empat lapisan `text-shadow` dengan radius blur yang meningkat dalam warna pilihan Anda, dengan kedip opsional: aktifkan dan aturan `@keyframes` dengan urutan penurunan opacity yang diacak akan dibuat dan dianimasikan langsung, dan tombol acak ulang memungkinkan Anda mengulang pola tanpa menulis satu keyframe pun secara manual. Teks bergaris menerapkan `-webkit-text-stroke` untuk browser yang mendukung, plus fallback `text-shadow` 8 arah yang jujur untuk yang tidak — kedua baris disertakan dalam CSS yang disalin dengan catatan alasannya. Gradient-fill memotong `linear-gradient` ke bentuk teks dengan `background-clip: text`, kini sudah menjadi properti standar dengan dukungan luas, tetap menyertakan baris berawalan `-webkit-` yang lama untuk mesin lawas.

Semuanya dirender secara lokal di browser Anda — tidak ada teks yang Anda ketik yang pernah dikirim ke mana pun. Salin blok CSS yang sudah jadi, termasuk aturan `@keyframes` saat efek membutuhkannya, langsung ke stylesheet Anda.

Menikmati alat ini? Merasa produk ini bermanfaat? Melihat potensi di dalamnya dan ingin mendukungnya?

🛡️
Dijalankan di Browser

File dan masukan Anda tidak pernah meninggalkan perangkat ini. Pemrosesan berjalan sepenuhnya offline. 100% Aman.

Format & Aturan yang Diterima

  • Lima efek sebenarnya — neon glow, 3D-extrude, letterpress/emboss, outline, dan gradient-fill — masing-masing dengan kontrol parameternya sendiri (warna, slider kedalaman/sudut, titik henti gradien).
  • Neon glow menyertakan animasi kedip opsional dengan pola opacity `@keyframes` yang diacak dan bisa Anda acak ulang tanpa menyentuh CSS secara manual.
  • 3D-extrude memungkinkan Anda menyeret kedalaman (jumlah lapisan) dan sudut secara independen; offset piksel setiap lapisan dan warna yang semakin gelap dihitung ulang secara langsung.

Manfaat Utama

✓ Kedalaman 3D-extrude dihitung dari trigonometri sebenarnya — offset setiap lapisan adalah cos(sudut) dan sin(sudut) dikalikan jaraknya — jadi mengubah sudut akan memutar seluruh ekstrusi persis seperti yang dilakukan pengaturan huruf 3D sesungguhnya.
✓ Setiap efek ditampilkan di atas teks yang Anda ketik, secara real time, jadi Anda bisa menilai keterbacaan dan kontras sebelum menyalin apa pun.
✓ Output yang bisa disalin tetap jujur soal dukungan browser: efek outline dan gradient-fill sama-sama menyertakan baris fallback berbasis standar di samping properti spesifik WebKit, dengan catatan yang menjelaskan alasannya.

Kasus Penggunaan

  • • Atur tampilan neon sign untuk judul halaman arahan, aktifkan animasi kedip acak, lalu salin blok text-shadow dan @keyframes yang sudah jadi.
  • • Setel kedalaman 3D-extrude ke 8 dan sudut ke 30 derajat agar logo terlihat tebal dan isometrik, lalu salin tumpukan text-shadow yang dihitung langsung ke stylesheet Anda.
  • • Buat teks judul bergaris tepi lengkap dengan baris -webkit-text-stroke dan fallback text-shadow, sehingga garis tepi tetap muncul di browser yang tidak mendukung stroke.