CSS Emboss Text Generator

Geprägte und gravierte Texteffekte verleihen Überschriften und Buttons einen dezenten, greifbaren Look — nur mit einem gut abgestimmten text-shadow. Mit diesem Tool tippst du deinen Text, wählst Geprägt (erhaben) oder Graviert (eingekerbt), passt die Intensität an und erhältst sofort den CSS-Code samt Live-Vorschau.

Was ist dieses Tool?

Dieses Tool kombiniert einen hellen und einen dunklen text-shadow, die in entgegengesetzte Richtungen versetzt sind, um die Illusion von erhabenem (geprägtem) oder eingekerbtem (graviertem) Text zu erzeugen.

Wechsle zwischen den Stilen Geprägt und Graviert und passe den Intensitätsregler an, um zu steuern, wie stark der 3D-Effekt wirkt.

Eine Live-Vorschau aktualisiert sich sofort, während du tippst oder Einstellungen änderst, sodass du den Effekt vor dem Kopieren feinabstimmen kannst.

Warum sollte man es nutzen?

Du gestaltest eine Landingpage im neumorphen Stil und willst, dass die Hauptüberschrift in den Hintergrund "eingedrückt" wirkt statt flach — stelle den Stil auf Graviert und kopiere den text-shadow direkt in dein CSS.
Du musst den Look einer gravierten Metallplatte für ein Retro- oder Industrie-Logo nachbilden, und das von Hand über text-shadow-Werte zu tüfteln würde eine halbe Stunde Ausprobieren kosten.
Du gestaltest ein "Verifiziert"-Badge oder Siegel für eine Website und willst, dass der Text leicht erhaben wirkt, wie auf einer geprägten Münze oder Medaille.
Ein Kunde wünscht sich für ein nostalgisches Projekt einen Button im Windows-95- oder skeuomorphen Stil, und der Prägeeffekt ist die Grundlage dieser Optik.
Du hast die Intensität auf Maximum gestellt und der Effekt wirkt für dein Design übertrieben — reduziere den Regler und beobachte die Live-Vorschau, bis eine dezente Prägung entsteht, die nicht vom Inhalt ablenkt.
Du willst denselben Effekt auf mehrere Überschriften mit unterschiedlichen Hintergrundfarben anwenden — generiere den Code für jede Kombination und prüfe in der Vorschau, ob der Kontrast weiterhin funktioniert, bevor du kopierst.

Anleitung

Gib den Text ein, den du stylen möchtest.
Wähle im Stil-Auswahlmenü Geprägt (erhaben) oder Graviert (eingekerbt).
Passe den Intensitätsregler an und wähle eine Hintergrund- und Textfarbe, die zu deinem Design passen.
Klicke auf „Kopieren“, um den generierten CSS-Code zu kopieren, und füge ihn in dein Stylesheet ein.

Beispiel

Eingabe

Text: "Embossed", Stil: Geprägt, Intensität: 2

Ausgabe

color: #c0c0c0;
background: #c0c0c0;
text-shadow: -2px -2px 1px rgba(255,255,255,0.7), 2px 2px 1px rgba(0,0,0,0.5);

Der generierte CSS-Code legt die Textfarbe, die Hintergrundfarbe und einen zweischichtigen text-shadow fest, der den erhabenen oder eingekerbten Effekt erzeugt.

Wie der Effekt funktioniert

Die geprägten und gravierten Effekte werden aus zwei versetzten text-shadow-Ebenen mit entgegengesetzten hellen und dunklen Farben aufgebaut.

Eigenschaft	Zweck
Heller Schatten (rgba(255,255,255,0.7))	Simuliert eine Lichtquelle, die eine Kante des Textes trifft
Dunkler Schatten (rgba(0,0,0,0.5))	Simuliert einen Schatten, der auf die gegenüberliegende Kante fällt
Versatzrichtung	Zwischen Geprägt und Graviert umgekehrt, um die 3D-Illusion zu wenden
Intensität	Steuert, wie weit der helle und dunkle Schatten vom Text versetzt sind
Passende Farben	Text- und Hintergrundfarbe eng beieinander gesetzt, um flachen Kontrast zu verbergen

Wann Geprägt und wann Graviert verwenden

Auch wenn es technisch dieselbe, nur umgekehrte Technik ist, vermitteln geprägt und graviert unterschiedliche Empfindungen — die Wahl sollte zum Kontext des Designs passen.

Nutze Geprägt für Elemente, die "drückbar" wirken sollen, wie Buttons oder Badges — das Auge interpretiert eine erhabene Fläche als etwas Interaktives.
Nutze Graviert für Labels, Wasserzeichen oder informativen Text, der fest wirken und Teil des Hintergrunds sein soll, als wäre er in eine Oberfläche eingekerbt.
In neumorphen Interfaces funktioniert Graviert besser für Eingabefelder oder "eingesunkene" Bereiche, während Geprägt aktiven Elementen vorbehalten bleibt.
Vermeide es, beide Stile im selben visuellen Block zu mischen — geprägte und gravierte Elemente nah beieinander stören die Konsistenz der simulierten Lichtquelle.

Häufig gestellte Fragen

Was ist der Unterschied zwischen Geprägt und Graviert?

Geprägt lässt den Text erhaben aus dem Hintergrund herausragen, wobei der helle Schatten oben links und der dunkle Schatten unten rechts liegt. Graviert kehrt dies um und lässt den Text stattdessen in den Hintergrund eingekerbt wirken.

Warum wirkt der Effekt am besten mit passender Text- und Hintergrundfarbe?

Die geprägte/gravierte Illusion beruht ausschließlich auf den Schattenlichtern und -schatten, nicht auf dem Kontrast zwischen Text und Hintergrund — daher liefert eine Textfarbe nahe an (oder identisch mit) der Hintergrundfarbe meist das sauberste Ergebnis.

Kann ich diesen Effekt auf beliebige Elemente anwenden, nicht nur auf Text?

Die von diesem Tool erzeugte text-shadow-Eigenschaft gilt nur für Text. Für einen ähnlichen Effekt bei Formen oder Buttons bräuchtest du stattdessen ein vergleichbares box-shadow-Setup.

Speichert oder verfolgt dieses Tool, was ich eingebe?

Nein. Das CSS wird vollständig in deinem Browser erzeugt — nichts wird an einen Server gesendet oder dort gespeichert.

Funktioniert das in allen Browsern?

Ja — text-shadow wird von allen modernen Browsern hervorragend unterstützt, einschließlich Chrome, Firefox, Safari und Edge.

Warum wirkt mein Text nach dem Einfügen des CSS auf meiner Website nicht geprägt?

Meist liegt es daran, dass die tatsächliche Hintergrundfarbe deines Elements nicht mit dem generierten background übereinstimmt, oder der Text eine zu andere Farbe als der Hintergrund hat. Kopiere auch die generierte Hintergrundfarbe, oder passe sie manuell an, sodass sie mit der Textfarbe identisch oder sehr ähnlich ist.

Kann ich den Prägeeffekt mit einer fetten oder sehr dicken Schrift kombinieren?

Ja, aber das Ergebnis verändert sich: Fette Schriften brauchen meist eine höhere Intensität, damit die Prägung sichtbar wird, während dünne Schriften mit niedriger Intensität besser aussehen — probiere mehrere Werte in der Live-Vorschau mit deiner echten Schrift aus, bevor du dich entscheidest.

Wirkt der Effekt genauso gut auf einem Hintergrund mit Bild oder Verlauf?

Nicht ganz — der Effekt ist auf einen einfarbigen Hintergrund abgestimmt. Auf einem Bild oder Verlauf werden die hellen und dunklen Schatten weiterhin angewendet, aber die Prägeillusion kann an Wirkung verlieren, wenn der Hintergrund bereits viel eigenen Kontrast hat.

Kann ich diese Technik im Dark Mode und Light Mode derselben Website nutzen?

Ja, aber du musst zwei separate Versionen erzeugen: Die hellen und dunklen Schattenfarben, die auf hellem Hintergrund gut wirken, erzielen auf dunklem Hintergrund nicht denselben Effekt — passe die Hintergrundfarbe im Tool für jedes Theme an und kopiere jeweils das passende CSS.