Neon Metin Oluşturucu

Bu Araç Nedir?

Bu araç, bir neon tabelanın yumuşak parlamasını yeniden yaratmak için seçtiğiniz parlama renginde, giderek artan bulanıklık yarıçaplarına sahip birden çok bulanık text-shadow değerini üst üste bindirir.

Hafif bir parlamadan güçlü, parlak bir efekte kadar kaç parlama katmanının üst üste bindirileceğini kontrol etmek için yoğunluk kaydırıcısını ayarlayın.

Koyu bir arka plan üzerindeki canlı önizleme, siz yazdıkça veya herhangi bir ayarı değiştirdikçe anında güncellenir, böylece CSS'i kopyalamadan önce parlamayı ince ayar yapabilirsiniz.

Neden Kullanmalısınız?

• 80'ler temalı bir mekanın açılış sayfasını yapıyorsun ve hero başlığının düz bir gölge yerine gerçek bir neon tabela efektine ihtiyacı var — canlı bir pembeyle CSS'i üretip doğrudan stil dosyana yapıştırıyorsun.
• Bir müşteri barının sitesi için neonla aydınlatılmış gibi görünen dijital bir logo istedi — markasının paletine uyanı bulana kadar farklı parlama renklerini canlı olarak deniyorsun.
• Bir oyun veya siberpunk etkinlik sayfası tasarlıyorsun ve Photoshop'ta görsel oluşturmadan başlığın koyu arka planda öne çıkmasını istiyorsun — metni doğrudan CSS'te üretiyorsun, böylece düzenlenebilir ve yüklemesi hafif kalıyor.
• Tasarım sisteminde zaten neredeyse siyah arka planlı bir bileşenin var ve hangi parlama renginin en iyi okunduğunu bulman gerekiyor — sitede zaten kullandığın tam renkle eşleşmesi için önizlemedeki arka planı değiştiriyorsun.
• Hero bölümünde dikkat çekmesi gereken bir banner için varsayılan parlama fazla soluk duruyor — gözden kaçmayacak kadar güçlü bir efekt elde edene kadar yoğunluk kaydırıcısını yükseltiyorsun.
• Bir junior geliştiriciye saf CSS'te neon efektinin nasıl çalıştığını anlatman gerekiyor — canlı önizlemeyi ve üretilen text-shadow kodunu gösteriyor, bulanıklık katmanları ile görsel sonuç arasındaki ilişkiyi hemen görmesini sağlıyorsun.

Nasıl Kullanılır

1. Parlamasını istediğiniz metni yazın.
2. Tasarımınıza uygun bir parlama rengi ve arka plan rengi seçin.
3. Parlama efektinin ne kadar güçlü görüneceğini kontrol etmek için yoğunluk kaydırıcısını ayarlayın.
4. Oluşturulan CSS kodunu kopyalamak için "Kopyala"ya tıklayın ve stil sayfanıza yapıştırın.

Örnek

Giriş

Metin: "NEON", Parlama Rengi: pembe, Yoğunluk: 3

Çıkış

color: #ffffff;
background: #0a0a12;
text-shadow: 0 0 2px #ff2ec4, 0 0 4px #ff2ec4, 0 0 8px #ff2ec4, 0 0 16px #ff2ec4;

Oluşturulan CSS, koyu bir arka plan üzerinde beyaz metni, seçilen parlama renginde üst üste bindirilmiş birden çok bulanık text-shadow katmanıyla birlikte ayarlar.

Neon parlama efekti nasıl çalışır

Parlama, her biri bir öncekinden daha büyük bir bulanıklık yarıçapına sahip, aynı renkte birkaç text-shadow katmanından oluşturulur.

İlgili araçlar

Daha fazla CSS metin efekti oluşturucu için bunları deneyin.

→ CSS Kabartma Metin Oluşturucu · Box Shadow Oluşturucu · CSS Glassmorphism Oluşturucu

Neon parlamasını gerçek bir projede kullanma ipuçları

Efekti üretmek kolaydır, ama bazı seçimler profesyonel duran bir başlıkla bir CSS deneyi gibi duran başlık arasındaki farkı yaratır.

• Neon efektini kısa başlıklar veya logolar için sakla — uzun paragraflarda birçok harf üzerinde tekrarlanan parlama okunabilirliği artırmak yerine yorucu hale getirir.
• Her zaman varsayılan pembe veya camgöbeğini seçmek yerine parlama rengini sayfanın geri kalanının paletiyle eşleştir — asit yeşili veya kehribar bir parlama, tasarımını çevrimiçi binlerce özdeş örnekten ayırabilir.
• Küçük ekranlarda yoğunluğu masaüstüne göre biraz azalt — daha geniş bulanıklık katmanları, zaten satır sonuna kayan bir başlıkta orantısız yer kaplar.
• JavaScript devre dışıyken veya çok eski bir tarayıcıda bile metnin okunabilir kalması gerekiyorsa, parlama olmadan tek başına beyaz metin renginin seçtiğin arka planda hâlâ okunabilir olduğunu kontrol et.

Sıkça Sorulan Sorular