Erstelle leuchtende Neonschriftzüge mit anpassbaren Farben, Pulsieren und exportierbarem CSS-Code.
/* CSS Code will be generated here */
Erstelle leuchtende Neonschriftzüge mit anpassbaren Farben, Pulsieren und exportierbarem CSS-Code. Geeignet für Alltag, Entwicklung, Lernen und schnelle Prüfungen.
Dieses Tool läuft im Browser. Prüfe vor sensiblen Daten, ob du deinem Gerät und Browser vertraust.
Mit diesem Tool erstellst du leuchtende Schrift im Stil einer Neonreklame – nur mit CSS-text-shadow. Links gibst du den Text der Leuchtreklame ein und stellst Schriftgröße (20 bis 100 px), Leuchtintensität (Radius 2 bis 30 px), Leuchtfarbe und Schriftstil (Monospace, Sans-serif, Serif oder Cursive) ein. Die Vorschau aktualisiert sich sofort, darunter steht der fertige CSS-Code zum Kopieren. Die pinke Startkonfiguration erzeugt .neon-text { color: #ffffff; font-family: sans-serif; font-size: 48px; text-shadow: 0 0 4px #fff, 0 0 10px #ff007f, 0 0 20px #ff007f; } plus eine Puls-Animation.
Der Effekt besteht aus drei text-shadow-Ebenen. Die erste ist ein 4 px weißes Leuchten, das den hellen Kern der Neonröhre nachahmt. Die zweite nutzt deine Farbe mit dem gewählten Radius als Unschärfe, die dritte dieselbe Farbe mit doppelter Unschärfe für den äußeren Lichthof. Der Text selbst ist weiß, weil der Kern einer echten Neonröhre fast weiß wirkt und die Farbe vor allem vom umgebenden Leuchten kommt. Ein größerer Radius ergibt einen weicheren, breiteren Schein, verschwimmt bei kleiner Schrift aber schnell – verkleinere den Radius also mit der Schriftgröße.
Ist der pulsierende Lichteffekt aktiv, enthält der CSS-Code eine Regel @keyframes neon-pulse: In der Mitte der Animation schrumpft das Leuchten auf die Hälfte und die Deckkraft sinkt auf 0,85; mit alternate und ease-in-out läuft die Animation hin und zurück, als würde die Röhre atmen. Die Pulsier-Geschwindigkeit reicht von 0,5 bis 4 Sekunden; kleinere Werte flackern schneller. Die vier Designvorlagen (Cyberpunk, Polarlichter, Tiefsee ohne Pulsieren und Retro Sunset) setzen Farbe, Radius, Größe und Animation mit einem Klick.
Neonschrift wirkt am besten auf dunklem Hintergrund; auf Weiß verschwindet der Lichthof fast vollständig. Halte das Pulsieren langsam, denn schnelles Blinken kann manche Menschen stören, und schalte es per Media Query prefers-reduced-motion bei Bedarf ab. text-shadow ist reines CSS ohne Bilder oder JavaScript und wird von allen modernen Browsern unterstützt. Die kopierte Klasse heißt .neon-text – benenne sie um und wende sie auf Überschriften oder Buttons an.
Mehrere text-shadow-Ebenen werden übereinandergelegt: eine kleine weiße Unschärfe als Röhrenkern und zwei farbige Unschärfen als Lichthof. Dieses Tool gibt 0 0 4px #fff, 0 0 [Radius] [Farbe], 0 0 [2 × Radius] [Farbe] aus und setzt die Textfarbe auf Weiß.
Der Lichthof ist eine halbtransparente farbige Unschärfe und hat auf hellem Grund kaum Kontrast. Verwende einen schwarzen, dunkelblauen oder anderen dunklen Hintergrund oder setze die Textfarbe selbst auf die Leuchtfarbe.
Eine text-shadow-Animation zwingt den Browser zum ständigen Neuzeichnen. Bei ein, zwei Überschriften ist das unproblematisch, viele blinkende Elemente können schwache Geräte aber ausbremsen. Schnelles Blinken kann lichtempfindliche Menschen belasten – wähle ein langsames Tempo und berücksichtige prefers-reduced-motion.
Im Tool stehen vier generische Schriftfamilien zur Auswahl. Für Google Fonts oder eine eigene Schrift kopierst du den CSS-Code und änderst font-family auf den Namen der Schrift; Schatten und Animation funktionieren weiterhin.
Kategorie ansehen: Design & Farben
Lies Farbcodes pixelgenau aus jedem Bild mit integrierter Lupe aus und sieh die dominante Farbpalette.
Konfiguriere und visualisiere CSS Flexbox- und Grid-Layouts visuell, sieh Animationen und kopiere CSS-Code.
Erstelle harmonische Farbschemata basierend auf einer Basisfarbe mit Export als HEX- und RGB-Code.
Optimiere und komprimiere SVG-Dateien lokal durch Entfernen unnötiger Metadaten mit Live-Vorschau.
