CSS Inliner - Convert CSS to Inline Styles in HTML

Enter the HTML code and the CSS styles in the input fields to merge them together into one HTML code with inline styles. If you have the styles in an HTML document wrapped in <style> tags then the program will retreive the CSS automatically.
Styles are auto-detected if your HTML contains <style> tags.

Demos:
HTML input
CSS input (optional)

CSS Inliner - What, Why, and How?

Turn stylesheets into inline styles for rock-solid HTML emails and single-file embeds.

Try the HTML Editor

What is this CSS Inliner?

It copies declarations from your stylesheets and writes them directly into each element's style="" attribute. This is crucial for HTML email, CMS embeds, and one-file sharing, or forum comments where external CSS styles are removed.

  • Email clients
  • One file share/archive
  • Where <style> tags are stripped

How to Use

  1. Paste HTML (left). Embedded <style> is read automatically.
  2. Optional CSS (right) for extra rules.
  3. Choose whether to remove <style> tags from output.
  4. Generate - then tweak output and see live preview.

Tip: Use demo buttons to load examples (specificity, media queries, attribute selectors, embedded <style>). Click "Generate Inline CSS" to inspect the result.

How It Works (Pipeline)

Parse HTML
Collect CSSembedded & input
Build CSSOM
Match Rulesselectors + viewport
Apply Inlinerespect cascade
 
  • Respects specificity, source order, and !important.
  • Applies only media queries that match the current viewport.
  • The generated code is reflecting the CSSOM.

What Gets Inlined?

Inlined

  • Normal rules: .btn{ color:red }
  • !important honored
  • Matching @media rules
 

Not Inlined

  • @keyframes, @font-face, @supports
  • Pseudo-elements ::before/::after
  • Interactive states (e.g., :hover)

Values are serialized (spaces, semicolons) by the CSSOM.

Media Queries

Only queries that match now are applied.
Want mobile output? Narrow the viewport and regenerate.
For desktop, widen and regenerate.
Save separate outputs for each target.

Workflow:
Generate Mobile → save → Generate Desktop → save.
 

Specificity & Cascade

  • Order: !important > specificity (a,b,c) > source order.
  • Existing inline styles stay unless overriden by !important.
  • Shorthands vs longhands follow normal rules (e.g., later padding-left can override padding).
 

☑ Remove classes and IDs checkbox

When enabled, class and id attributes are stripped after inlining. Use for email/static embeds. Leave off if anchors, JavaScript, or CSS variables depend on them.

Limitations

  • CSS custom properties (var(--x)) aren't computed.
  • Comments are removed; property order may change inside style.
  • Relative URLs are untouched - ensure they resolve in target.
 

Unoptimized Output

The output could be smaller. Blame the CSSOM for it.

Input:

background:red;

Output:

background-image: initial;
background-position-x: initial;
background-position-y: initial;
background-size: initial;
background-repeat: initial;
background-attachment: initial;
background-origin: initial;
background-clip: initial;
background-color: red;

Email Tips

  • Use table-based layout for complex structures.
  • Prefer explicit widths and basic properties.
  • Absolute image URLs + alt text.
  • Avoid custom fonts/animations; test in major clients.

Security

The preview iframe is sandboxed, but don't paste untrusted HTML that might load external scripts or trackers.

Heads-up: Inline styles can't execute scripts, but pasted HTML can still include bad links.

Inline vs Stylesheet (Quick Compare)

Topic Inline External
Email support Excellent Poor/varies
Maintainability Harder Better
File size Larger Smaller
Performance OK (email) Best (web)

Pro Tips

  • Keep a "web" version with external CSS and an "email" version inlined.
  • Minimize before inlining to reduce final size.
  • Test with different viewport widths to capture target media queries.

Edit and Optimize the Result

Optimize your inlined CSS in the advanced HTML6 editor.
Preview your code and make fine adjustments.

Open the HTML Editor
➤