text-shadow: 0px 0px 7px #4466eeff, 0px 0px 14px #4466eee6, 0px 0px 28px #4466eeb3;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 Text-Shadow-Eigenschaft ist einfacher als Box-Shadow - sie hat keinen Spreizradius und kein eingefügtes Schlüsselwort -, aber die Ebenenbildung wird dort leistungsfähig. Eine einzelne Deklaration kann mehrere Schatten mit jeweils eigenen Offsets, Unschärfe und Farbe stapeln. Mit dem Stapeln von Layers bauen Sie Neonglühe, harte Konturen, Retro-3D-Schriftzüge, Buchdruck-Segment-Effekte und lange flache Schatten. Das Schreiben von Hand ist fummelig, daher verwaltet dieses Tool die Ebenen und gibt eine spezifizierte, durch Kommas getrennte Erklärung in der richtigen Lackreihenfolge 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.
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.
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.
Fügen Sie zusätzliche Ebenen hinzu, um Glow, Outline oder 3D-Tiefe zu erzeugen – mehrere Offset-Kopien eines Schattens, der als extrudierter Text gelesen wird, während gestapelte verschwommene Kopien als Glanz gelesen werden.
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.
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
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
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
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
Design layered CSS box-shadows with a live preview and sliders for offset, blur, spread, color, opacity, and inset — then copy production-ready CSS.
Create beautiful CSS gradients with live preview
Pick colors and convert between HEX, RGB, and HSL formats
0 comments
No comments yet. Be the first to share your thoughts!