text-shadow: 0px 0px 7px #4466eeff, 0px 0px 14px #4466eee6, 0px 0px 28px #4466eeb3;Was ist der CSS-Textschattengenerator?
Der CSS-Textschattengenerator ist ein visueller Editor für die CSS-Text-Shadow-Eigenschaft. Sie passen den horizontalen Versatz, den vertikalen Versatz, den Radius, den Unschärferadius, die Farbe und die Deckkraft mit Schiebereglern an und sehen, wie der Effekt live auf dem Beispieltext rendert und dann das genaue CSS kopieren. Anstatt Pixelwerte zu erraten und Ihre Seite zu aktualisieren, formen Sie den Schatten direkt und lesen den von ihm erzeugten Code.
Die Eigenschaft Text-Schatten ist einfacher als Box-Shadow - sie hat keinen Spreizradius und kein eingesetztes Schlüsselwort - aber beim Layering wird sie leistungsfähig Eine einzelne Deklaration kann mehrere Schatten stapeln, jeder mit seinen eigenen Offsets, Unschärfe und Farbe. Durch das Stapeln von Ebenen baut man Neonleuchten, harte Umrisse, Retro-3 D-Schriftzüge, Buchdruckprägeeffekte und lange flache Schatten auf. Das Schreiben dieser von Hand ist fummelig, daher verwaltet dieses Tool die Ebenen und gibt eine spec-gültige, kommaseparierte Deklaration in der richtigen Farbreihenfolge aus.
Alles passiert in Ihrem Browser. Wählen Sie ein Preset wie Neonglühen oder Umriss, stimmen Sie jede Ebene ab, wechseln Sie die Vorschau zwischen hellen und dunklen Hintergründen, bearbeiten Sie den Beispieltext und kopieren Sie das CSS. Kein Konto, kein Upload und es funktioniert weiterhin offline, sobald die Seite geladen wurde.
Layer Order läuft zuerst bis zuletzt, von vorne nach hinten, also sitzt der zuerst aufgeführte Schatten oben Das macht es, dass Umrisse funktionieren: Vier kleine Schatten versetzen ein Pixel in jede Richtung versetzt, gestapelt, nähern sich einem Hub an, für den CSS keine direkte Eigenschaft hat Der Unschärferadius ist der teure Teil, den man rendern muss, und Text mit mehreren großen Unschärfen, die auf der Bildlaufrolle neu lackiert werden, ist eine häufige Ursache für Scherz auf Geräten mit geringerer Leistung. Schatten beeinflussen niemals das Layout, sodass sie ihre Box überlaufen und von einem Elternteil mit Überlauf versteckt werden können.
Wie verwende ich den CSS-Textschattengenerator?
Beginnen Sie mit einer voreingestellten oder leeren Ebene
Wählen Sie eine Voreinstellung wie Soft, Neon Glow, Retro 3D oder Outline, um einen realistischen Ausgangspunkt zu erhalten, oder beginnen Sie mit einer einzelnen Standardschattenebene und bauen Sie von dort aus auf.
Stimmen Sie den Schatten mit Schiebereglern ab
Ziehen Sie die Schieberegler für horizontale und vertikale Versatz- und Unschärferadius und legen Sie die Schattenfarbe und Deckkraft fest. Sehen Sie sich den Beispieltext sofort beim Bearbeiten an.
Stapeln Sie mehr Ebenen für Effekte
Fügen Sie zusätzliche Schichten hinzu, um Leuchten, Umrisse oder 3 D-Tiefe zu erzeugen - mehrere Offsetkopien eines Schattens werden als extrudierter Text gelesen, während gestapelte unscharfe Kopien als Leuchten gelesen werden.
Kopieren Sie das CSS
Kopieren Sie die Text-Shadow-Deklaration und fügen Sie sie direkt in Ihre Stylesheet- oder Komponentenstile ein. Wenden Sie es auf ein beliebiges Textelement an, um den gleichen Effekt zu erhalten.
Hauptmerkmale
Mehrschichtschatten
Stapeln Sie eine beliebige Anzahl von Schattenebenen in der richtigen Reihenfolge von oben nach unten in einer Deklaration, in der Neon leuchtet, Konturen und 3D-Text erstellt werden
Volle Eigenschaftskontrolle
Slider für horizontalen und vertikalen Versatz und Unschärferadius sowie eine Farbauswahl und ein Opazitätsregler, decken jeden Teil der Text-Shadow-Grammatik ab
Live-Vorschau
Beispieltextaktualisierungen beim Bearbeiten sofort und Sie können den Hintergrund zwischen hell und dunkel umschalten, um zu überprüfen, wie der Effekt in beiden Themen gelesen wird
Voreinstellungen
Kuratierte Rezepte für weiche, harte, Neonglühen, Retro-3D-, Umriss-, Präge-, Feuer- und Langschatteneffekte geben Ihnen einen bewährten Ausgangspunkt anstelle einer leeren Leinwand
Frequently Asked Questions
Related Tools
CSS Filter Generator
Apply blur, brightness, contrast, grayscale, sepia, hue-rotate and more with live sliders and a preview, then copy production-ready CSS filter code.
CSS Glassmorphism Generator
Create frosted-glass UI with a live preview and sliders for backdrop blur, transparency, saturation, color, and radius - then copy production-ready CSS.
CSS Neumorphism Generator
Create soft-UI (neumorphic) elements with a live preview and controls for distance, blur, intensity, radius, surface color, and flat/concave/convex/pressed shapes - then copy the CSS.
Maps Scraper
Pull business listings for any search and place: name, address, category, rating, review count, phone and website, deduplicated and exportable as CSV.
Comments
0 comments
No comments yet. Be the first to share your thoughts!