Neon-Text-CSS-Generator
Schrift im Neonröhren-Look leuchten lassen und das CSS direkt kopieren
Mit diesem Werkzeug geben Sie Ihrer Schrift ein Leuchten wie von einer Neonröhre und sehen das Ergebnis sofort in der Vorschau. Farbe, Weichzeichnungsradius, Anzahl der Glow-Ebenen und die Pulsanimation stellen Sie per Schieberegler ein; daraus entsteht direkt einsatzbereites text-shadow-CSS. Alle Berechnungen laufen im Browser, Ihr Text wird nicht an einen Server übertragen – und den Code fügen Sie ohne Umwege in Webbanner, Poster oder Eventseiten ein.
도구를 불러오는 중…
🔒 Alles läuft zu 100 % in Ihrem Browser. Ihre Dateien und Eingaben werden niemals auf einen Server hochgeladen.
Anleitung
- Tippen Sie den gewünschten Text in das Eingabefeld.
- Wählen Sie eine Vorlage wie Cyan, Pink oder Grün oder legen Sie die innere und äußere Leuchtfarbe selbst fest.
- Justieren Sie Weichzeichnungsradius, Anzahl der Glow-Ebenen, Schriftgröße und Geschwindigkeit der Pulsanimation über die Schieberegler und prüfen Sie die Vorschau.
- Kopieren Sie den unten erzeugten CSS-Code über die Schaltfläche „CSS kopieren“ und fügen Sie ihn in Ihr Projekt ein.
FAQ
- Wo kann ich das erzeugte CSS einsetzen?
- Der Code besteht aus reinem CSS mit text-shadow und @keyframes-Animation und lässt sich in jede Website und jedes HTML-Projekt einfügen. Am besten wirkt der Effekt auf dunklem Hintergrund.
- Was passiert, wenn ich die Pulsanimation ausschalte?
- Wenn Sie das Kontrollkästchen deaktivieren, entsteht statisches CSS mit festem Neonleuchten – ohne @keyframes-Animation, die opacity und text-shadow pulsieren lässt.
- Darf ich beliebig viele Glow-Ebenen hinzufügen?
- Je mehr Ebenen, desto voller wirkt das Leuchten – zugleich steigt mit jeder zusätzlichen text-shadow-Ebene der Rendering-Aufwand. Wie im Werkzeug empfohlen, bleiben Sie aus Performance-Gründen besser bei drei bis vier Ebenen.