# 3D-Texteffekt: extrudierte Schrift mit Geschmack [Canonical HTML page](https://gradiently.design/de/guide/3d-text-effect) Extrudierte Schrift kann wie ein Vintage-Schild aussehen oder wie ein Web-Banner von 2004. Der Unterschied sind Tiefe, Richtung und Farbe, und alle drei sind leicht richtig zu machen, wenn du die Regeln kennst. ## The short version - Ein 3D-Texteffekt, oder Extrusion, gibt flachen Buchstaben Tiefe, indem er feste Seiten ergänzt, die in eine Richtung verlaufen. - Extrudiertes Lettering wirkt geschmackvoll, wenn die Tiefe kurz ist, etwa 5 bis 10 Prozent der Buchstabenhöhe, und die Seiten ein dunklerer Ton des Hintergrunds sind. - Schwere, schlichte Schriften lassen sich gut extrudieren; dünne, detailreiche oder Schreibschriften werden zum Durcheinander. - In CSS baust du einen 3D-Texteffekt, indem du viele text-shadow-Ebenen stapelst, jede einen Schritt weiter versetzt, ohne Unschärfe. - Nutze extrudierte Schrift für wenige große Wörter, etwa eine Headline oder ein Schild, nie für Sätze. Ein **3D-Texteffekt** lässt flache Buchstaben massiv wirken, indem er Seiten ergänzt, als wäre jeder Buchstabe aus einem Block geschnitten und leicht von der Seite gesehen. Geschmackvoll gemacht nutzt er eine schwere Schrift, eine kurze Tiefe von etwa 5 bis 10 Prozent der Buchstabenhöhe, eine einheitliche Richtung und Seitenfarben aus einem dunkleren Ton des Hintergrunds. Schlecht gemacht nutzt er Verläufe, glänzende Lichter, lange Tiefen und mehrere Richtungen zugleich. Halte es schlicht, und extrudierte Schrift wirkt wie ein selbstbewusstes Schild statt wie Clipart. ## Was extrudierten Text gut oder billig aussehen lässt ### Wirkt billig - Tiefe länger, als die Buchstaben dick sind - Glänzende Lichter und Fasen - Seiten in einer Farbe ohne Bezug zum Design - Perspektive, die Buchstaben wegkippen lässt - Extrusion auf dünner oder Schreibschrift - Mehrere Effekte auf einem Wort gestapelt ### Wirkt durchdacht - Kurze Tiefe, etwa 5 bis 10 Prozent der Höhe - Flache, feste Seiten ohne Glanz - Seitenfarbe aus einem dunkleren Ton des Grunds - Eine Richtung, meist nach unten rechts - Eine schwere, schlichte Schrift mit offenen Formen - Extrusion als einziger Effekt Extrusion hat eine lange Geschichte in handgemalten Schildern, Zirkusplakaten und Plattenhüllen der 1970er. Diese Geschichte ist der Grund, warum sie warm und ein wenig nostalgisch wirkt. Nutze das für Cafés, Eis, Kindermarken, Musik und Events. Für eine ruhige, minimalistische Marke ist sie meist die falsche Stimme; [Texteffekte](https://gradiently.design/de/guide/text-effects) hilft, einen passenden zu wählen. ## Tiefe, Richtung und Farbe wählen ### Tiefe Die Seiten sollten kürzer sein, als die Buchstabenstriche breit sind. Bei einer 160-px-Headline wirkt eine Tiefe von 8 bis 16 px massiv; 40 px beginnt wie ein langer Schatten auszusehen, was ein anderer Stil ist. Kleiner Text kann gar keine Tiefe tragen, beschränke Extrusion also auf Headline-Größen. | Headline-Größe | Tiefe | Wirkt wie | | --- | --- | --- | | 100 px | 5 bis 8 px | Ein dezentes Abheben von der Seite | | 160 px | 8 bis 16 px | Ein gemaltes Schild | | 240 px | 14 bis 24 px | Eine kräftige Plakat- oder Verpackungszeile | | Jede Größe, Tiefe über 20 % | Lang | Ein langer Schatten: ein eigener, grafischer Stil | Die Tiefe als Anteil der Buchstabenhöhe entscheidet, ob extrudierter Text massiv oder wie ein Schatten wirkt. ### Richtung Wähle eine Richtung und behalte sie in jedem Design. Nach unten und rechts ist am natürlichsten, weil wir Licht meist als von oben links kommend lesen. Gerade nach unten wirkt wie gestapelte Blöcke. Nach oben links wirkt ungewohnt, was für eine einzelne Aussage funktionieren kann, aber schnell ermüdet. ### Farbe Drei Töne leisten die ganze Arbeit: die Buchstabenfläche, die Seite und der Grund. Die Fläche sollte stark mit dem Grund kontrastieren. Die Seite liegt dazwischen, meist ein tiefer Ton des Grunds oder der Fläche. Sie vom Hintergrund zu nehmen lässt die Extrusion vom selben Licht beleuchtet wirken. - Fläche: Creme: #fff1d6 - Seite: Rost: #c2410c - Grund: Orange: #f97316 - Seite: Tiefblau: #1e3a8a - Grund: Himmel: #60a5fa Zwei Sets. Cremefarbene Buchstaben mit rostfarbenen Seiten auf Orange; oder cremefarbene Buchstaben mit tiefblauen Seiten auf Himmelblau. In jedem ist die Seite ein dunklerer Ton des Grunds. Ein Hochformat-Post einer Eisdiele mit dem einzelnen Wort „Eiskugeln“ groß über einem warmen Verlauf Ein fettes Wort und ein warmer Grund: die Art Headline, zu der extrudiertes Lettering passt. Ein quadratischer Eventpost, der ein Straßenfest mit Zeit und Details in kleinerer Schrift ankündigt Zwei kurze Wörter auf einem quadratischen Post. Mehr, und die Tiefe beginnt das Layout zu bedrängen. ## So machst du einen 3D-Texteffekt in CSS CSS hat keine Extrude-Eigenschaft, aber gestapelte Schatten erledigen es. Jede `text-shadow`-Ebene ist eine feste Kopie der Buchstaben, einen Pixel weiter versetzt, ohne Unschärfe. Stapelst du genug davon, verschmelzen die Kopien zu festen Seiten. Ein letzter, weicherer Schatten darunter erdet die Buchstaben auf der Seite. ```css .extruded { font-family: "Archivo Black", system-ui, sans-serif; /* load it from Google Fonts */ font-size: 10rem; line-height: 1; color: #fff1d6; text-shadow: 1px 1px 0 #c2410c, 2px 2px 0 #c2410c, 3px 3px 0 #c2410c, 4px 4px 0 #c2410c, 5px 5px 0 #c2410c, 6px 6px 0 #c2410c, 7px 7px 0 #c2410c, 8px 8px 0 #c2410c, 10px 12px 10px rgb(67 20 7 / 0.35); } ``` Acht feste Ebenen ergeben eine 8-px-Extrusion nach unten rechts, und ein weicher letzter Schatten setzt sie auf den Grund. Dutzende Ebenen von Hand zu schreiben ist mühsam. Ein paar Zeilen JavaScript erzeugen die Liste für jede Tiefe, Richtung und Farbe, die du in dein Stylesheet einfügen kannst. ```js // Build a text-shadow value for an extrusion function extrude(depth, color, dx = 1, dy = 1) { const layers = []; for (let i = 1; i <= depth; i++) { layers.push(`${i * dx}px ${i * dy}px 0 ${color}`); } return layers.join(", "); } console.log(extrude(12, "#1e3a8a")); // down and right console.log(extrude(10, "#1e3a8a", 0, 1)); // straight down ``` Füge die Ausgabe in `text-shadow` ein. Nimm Pixelschritte von eins, damit die Seiten massiv bleiben. Halte extrudierte Überschriften auf einer Website als echten Text, damit sie durchsuchbar, markierbar und für Screenreader lesbar bleiben. Die Schatten ändern den gemessenen Kontrast zwischen Buchstabe und Hintergrund nicht, achte also darauf, dass die Buchstabenfarbe für sich besteht. Willst du eine leichtere, grafische Version, behandelt [Textschatten](https://gradiently.design/de/guide/text-shadow-alternatives) einen einzelnen harten Schatten ohne Ebenen; für echtes 3D mit Licht und Rotation bist du im Gebiet von WebGL, in das [Shader-Verläufe](https://gradiently.design/de/guide/shader-gradients) einführt. ## Extrudiertes Lettering Schritt für Schritt 1. **Zwei bis vier Wörter wählen** Ein Ladenname, ein einzelnes Angebot, ein Eventtitel. Extrusion braucht Raum drumherum. 2. **In einer schweren Schrift setzen** Eine Black-Grotesk oder Egyptienne oder eine weiche Retro-Serife. [Retro-Schriften](https://gradiently.design/de/guide/retro-fonts) nennt einige mit der richtigen Wärme. 3. **Farben für Fläche, Seite und Grund wählen** Starker Kontrast zwischen Fläche und Grund; die Seite ein dunklerer Ton des Grunds. 4. **Tiefe in eine Richtung ergänzen** Starte bei etwa 6 Prozent der Buchstabenhöhe, nach unten rechts. Erhöhe nur, wenn es noch flach wirkt. 5. **Alles andere flach lassen** Details, Daten und Preise in einer schlichten, vollen Grotesk ohne Effekt. ## Extrudierte Schrift in Gradiently Extrusion ist einer der Lettering-Looks von Gradiently: Er gibt jedem Text im Studio feste Tiefe nach unten rechts, mit Seiten in den eigenen Farben des Marks und einem Regler für die Tiefe, sodass du keine Ebenen stapeln musst. Der Mark hinter dem Design schiebt seine ruhigste Fläche hinter die Wörter, sodass extrudiertes Lettering lesbar bleibt, wie sich der Hintergrund über das Bild auch verschiebt. Der [Outline-Texteffekt](https://gradiently.design/de/guide/outline-text) und andere Looks stehen im selben Menü, falls die Extrusion für die Botschaft zu laut ist. ## FAQ ### Wie mache ich 3D-Text in CSS? Stapele mehrere `text-shadow`-Ebenen, jede einen Pixel weiter in dieselbe Richtung versetzt, ohne Unschärfe, in einer dunkleren Farbe als die Buchstaben. ### Welche Schrift eignet sich am besten für einen 3D-Texteffekt? Schwere, schlichte Schriften wie eine Black-Grotesk, eine Egyptienne oder eine weiche Retro-Serife. Dünne und Schreibschriften werden extrudiert unordentlich. ### Wie tief sollte extrudierter Text sein? Etwa 5 bis 10 Prozent der Buchstabenhöhe. Viel tiefer, und er wirkt stattdessen wie ein langer Schatten. ### Warum wirkt mein 3D-Text billig? Meist zu viel Tiefe, glänzende Lichter oder Seitenfarben ohne Bezug zum Design. Nimm kurze, flache Seiten in einem dunkleren Ton des Hintergrunds.