E-Mail-CSS-Inliner CSS-Styles direkt in HTML-Elemente einfügen, um E-Mail-Vorlagen kompatibel zu machen.

🎨

E-Mail-CSS-Inliner

CSS-Styles direkt in HTML-Elemente einfügen, um E-Mail-Vorlagen kompatibel zu machen.

Fügen Sie Ihr HTML ein

Geben Sie die HTML-Markierung für Ihre E-Mail-Vorlage ein.

Fügen Sie Ihr CSS ein

Geben Sie die CSS-Styles ein, die inline angewendet werden sollen.

Kopieren Sie das HTML mit inlined Styles

Vorschau des Ergebnisses und Kopie des HTML-Codes mit allen inline-Styles.

Loading tool...

What Is E-Mail-CSS-Inliner?

Der Email-CSS-Inliner konvertiert externe CSS-Regeln in Inline-Stilattribute für HTML-Elemente und macht Ihre E-Mail-Vorlagen damit mit den großen E-Mail-Clients kompatibel. Die meisten E-Mail-Clients (Gmail, Outlook, Yahoo Mail) entfernen <style>-Tags und ignorieren externe Stylesheets, was bedeutet, dass CSS direkt als Inline-Stilattribute auf jedem Element angewendet werden muss. Dieses Tool nimmt Ihre HTML-Markierung und CSS-Regeln, ordnet Selektoren den entsprechenden Elementen zu und fügt die passenden Stile als Inline-Stilattribute hinzu. Es unterstützt Tag-Selektoren und Klassen-Selektoren, was den Konvertierungsprozess schnell und automatisiert macht. Die Vorschau zeigt das gestaltete Ergebnis an, damit Sie es vor dem Kopieren überprüfen können. Dies ist ein wesentlicher Schritt bei der Entwicklung von E-Mail-Vorlagen.

Why Use E-Mail-CSS-Inliner?

Automatische Umwandlung von CSS-Regeln in Inline-Stilattribute
Unterstützt sowohl Tag- als auch Klassen-CSS-Selektoren
Live-Vorschau der gestylten HTML-Ausgabe
Wichtig für die Kompatibilität mit E-Mail-Clients (Gmail, Outlook, Yahoo)

Common Use Cases

Entwicklung von E-Mail-Vorlagen

Inline-Styles für Marketing- und Transaktions-E-Mails.

Newsletter-Design

Vorbereitung des Newsletter-HTML-Codes mit Inline-Styles für eine breite Client-Unterstützung.

Automatisierte E-Mails

Verarbeitung von CSS für automatisierte Benachrichtigungs- und Willkommens-E-Mail-Vorlagen.

E-Mail-Testing

Umwandlung und Testen von E-Mail-HTML in verschiedenen E-Mail-Clients.

Technical Guide

E-Mail-HTML hat im Vergleich zu Web-HTML erhebliche CSS-Einschränkungen. Die meisten E-Mail-Clients unterstützen nur Inline-Stile (über Stilattribute), grundlegende CSS-Eigenschaften und tabellenbasierte Layouts. Gmail entfernt <style>-Tags im <head>. Outlook verwendet den Word-Rendering-Motor mit eingeschränkter CSS-Unterstützung. Der Inlining-Prozess analysiert CSS-Regeln, ordnet Selektoren HTML-Elementen zu und fügt passende Deklarationen als Stilattribute hinzu. Einfache Tag-Selektoren (h1, p, a) und Klassen-Selektoren (.button, .container) werden am zuverlässigsten zugeordnet. Komplexe Selektoren (Kombinatoren, Pseudo-Klassen, Pseudo-Elemente) haben ohnehin eine eingeschränkte Unterstützung in E-Mail-Clients. Nach dem Inlining sollten Sie mit Tools wie Litmus oder Email on Acid über mehrere Clients hinweg testen. Halten Sie das E-Mail-HTML einfach: Verwenden Sie Tabellen für das Layout, Inline-Stile für alle Anzeigeeigenschaften und enthalten sowohl HTML- als auch Plain-Text-Versionen. Vermeiden Sie CSS-Funktionen wie Flexbox, Grid, Position und Float in E-Mails.

Tips & Best Practices

1
Verwenden Sie tabellarische Layouts für maximale Kompatibilität mit E-Mail-Clients
2
Testen Sie den inlined HTML-Code mindestens in Gmail, Outlook und Apple Mail
3
Halten Sie CSS einfach - vermeiden Sie Selektoren, die nicht inline umgewandelt werden können (Pseudo-Elemente)
4
Fügen Sie Breitenattribute zu Tabellen und Bildern für die Kompatibilität mit Outlook hinzu

Related Tools

CSS-Schaltflächen-Generator

Entwerfen Sie benutzerdefinierte CSS-Schaltflächen mit Farben, Abständen, Rändern, Schatten und Hover-Effekten.

🎨 CSS & Design

CSS-Tabellengenerator

Erstellen Sie schön gestaltete HTML-Tabellen mit anpassbaren Farben, Streifen und Hover-Effekten.

🎨 CSS & Design

CSS-Variable-Generator

Erstellen Sie benutzerdefinierte CSS-Eigenschaften (Variablen) für Farben, Abstände und Typografie.

🎨 CSS & Design

Druck-Stylesheet-Generator

Erstellen Sie @media Druck-Stylesheets mit Optionen, um Elemente zu verstecken, Text zu stylen und Seitenumbrüche zu kontrollieren.

🎨 CSS & Design

Frequently Asked Questions

Q Warum benötigen E-Mails Inline-CSS?

Die meisten E-Mail-Clients entfernen <style>-Tags und ignorieren externe Stylesheets, nur CSS in Stilattributen wird unterstützt.

Q Unterstützt dieses Tool alle CSS-Selektoren?

Es unterstützt Tag-Selektoren und Klassen-Selektoren. Komplexe Selektoren (Pseudo-Klassen, Kombinatoren) haben ohnehin eine begrenzte Unterstützung in E-Mails.

Q Welche E-Mail-Clients erfordern Inline-CSS?

Gmail, Yahoo Mail, Outlook und viele andere. Nur wenige moderne Clients unterstützen <style>-Tags.

Q Kann ich Flexbox oder Grid in E-Mails verwenden?

Nein, die meisten E-Mail-Clients unterstützen keine modernen CSS-Layouts. Verwenden Sie tabellarische Layouts für E-Mails.

Q Sollte ich den inlined HTML-Code testen?

Auf jeden Fall. Testen Sie immer in mehreren E-Mail-Clients. Verwenden Sie Dienste wie Litmus oder Email on Acid für umfassendes Testing.

About This Tool

E-Mail-CSS-Inliner is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.