Inline the CSS of an email

Outlook and several webmail clients ignore or strip a <style> block. Inlining is the boring, mechanical step between a design that works in a browser and one that works in an inbox.

Loading the tool…

How it works

  1. Paste the HTML with its <style> block.
  2. Press Inline the CSS.
  3. Copy or download the result, and check it in the preview below.

Why nothing is uploaded

Every operation on this page is done by code running inside your browser tab, using the same engine that renders web pages. The file is read from disk into your tab’s memory, transformed there, and written back out as a download. It is never sent anywhere — not to us, not to a third party.

Verify it yourself

  1. Open your browser’s developer tools (F12) and select the Network tab.
  2. Load your file and run the tool.
  3. The only requests you will see fetch the tool’s own code — and, for a few heavy tools, their open-source engine from a public CDN — plus one small page-view ping to loreatec.jp (page address and title, nothing more). None of them carry your file.

Proof it stays local →

Frequently asked questions

Why can media queries not be inlined?

Because an inline style has no condition attached to it — it applies always. A media query is a condition, so it can only live in a <style> block. That is why a responsive e-mail needs both: inline styles for the base design, and a <style> block for the phone layout, accepting that the clients which strip <style> will show the base design.

What happens to :hover?

Same problem, same answer: it stays in the <style> block. Treat hover effects as a bonus for the clients that support them, never as something the message depends on.

Which wins, my existing inline style or the stylesheet?

Yours. Anything already in a style attribute is kept and placed after the rules coming from the stylesheet, so it continues to override them — the same as in a browser.

Is this the same as what my newsletter tool does?

Most of them inline on send, yes. This is for the case where you are handing HTML to someone else, sending through an API, or debugging why a rule did not survive.