CSS-Texteffekt-Generator
Geben Sie Ihren eigenen Text ein und sehen Sie echte Neonglühen-, 3D-Extrusion-, Letterpress-, Kontur- und Farbverlauf-CSS-Effekte live in der Vorschau, mit durch richtige Mathematik berechneten Parametern und einem kopierbaren CSS-Block.
🔒 Wird vollständig in Ihrem Browser verarbeitet – nichts, was Sie hier eingeben, wird jemals hochgeladen.
Ergebnis
Die meisten CSS-Texteffekt-Galerien geben Ihnen eine feste Vorlage: ein Neonglühen, eine 3D-Extrusion, fertig. Dieser Generator hingegen baut das CSS aus Ihren Parametern und auf dem von Ihnen eingegebenen Text. Wählen Sie Neonglühen, 3D-Extrusion, Letterpress/Prägung, Kontur oder Farbverlauf aus der Effekt-Auswahl, passen Sie die spezifischen Regler des Effekts an, und sowohl die Live-Vorschau als auch der kopierbare CSS-Block darunter aktualisieren sich bei jeder Änderung.
Der 3D-Extrusion-Effekt ist derjenige, den es zu verstehen lohnt: Bei einer gewählten Tiefe (Anzahl gestapelter Schichten) und einem Winkel wird die Schicht i horizontal um i × cos(Winkel) und vertikal um i × sin(Winkel) versetzt, berechnet in JavaScript mit den echten trigonometrischen Funktionen – nicht aus einer Nachschlagetabelle vorgegebener Winkel. Bei 45 Grad sind horizontaler und vertikaler Versatz für jede Schicht gleich, weil Cosinus und Sinus von 45° denselben Wert haben; drehen Sie den Winkel-Schieberegler und beobachten Sie, wie der gesamte Stapel von text-shadow-Schichten in Echtzeit um die Buchstaben schwingt, wobei jede etwas stärker abgedunkelt wird als die vorherige, um eine beleuchtete 3D-Fläche vorzutäuschen.
Neonglühen stapelt vier text-shadow-Ebenen mit zunehmendem Weichzeichnungsradius in Ihrer gewählten Farbe, mit einem optionalen Flackern: Schalten Sie es ein, und eine @keyframes-Regel mit einer zufälligen Sequenz von Deckkrafteinbrüchen wird generiert und live animiert, und ein Neu-Mischen-Knopf erlaubt Ihnen, das Muster neu zu würfeln, ohne eine einzige Keyframe von Hand zu schreiben. Konturierter Text wendet -webkit-text-stroke für Browser an, die es unterstützen, plus einen ehrlichen 8-Richtungs-text-shadow-Fallback für diejenigen, die es nicht tun – beide Zeilen werden im kopierten CSS mit einem Hinweis zum Grund ausgeliefert. Farbverlauf schneidet einen linear-gradient mit background-clip: text auf die Textform zu, jetzt eine Standard-Eigenschaft mit breiter Unterstützung, wobei die ältere -webkit--präfixierte Zeile für ältere Engines erhalten bleibt.
Alles wird lokal in Ihrem Browser gerendert – kein eingegebener Text wird jemals irgendwohin gesendet. Kopieren Sie den fertigen CSS-Block, einschließlich der @keyframes-Regel, wenn der Effekt eine benötigt, direkt in Ihr Stylesheet.