Inline CSS for HTML Email Online

Move <style> rules into style="" attributes for HTML e-mails, keep media queries, and warn about CSS that Gmail and Outlook do not support.

Result

Press “Run” to see the result.

Many e-mail clients ignore or strip <style> blocks, so HTML e-mails must carry their CSS in style attributes. The inliner parses the style sheets of the message, applies each rule to the matching elements in the right order (selector specificity, source order, !important, existing inline styles winning over normal rules) and writes the result inline.

Rules that cannot be inlined, such as @media queries for mobile layouts, :hover and @font-face, are kept in a single <style> element in the head (keep_style_tags=true keeps the original blocks too). After inlining, the API reports compatibility problems: flexbox and grid, position, float, background images, border-radius and box-shadow in Outlook, CSS variables, calc(), rem / vh units, images without alt text, and messages over Gmail’s 102 KB clipping limit.

Selectors supported: tags, classes, ids, attributes, descendant and child combinators, :first-child and similar structural pseudo-classes.

Use this in your code

curl -X POST "https://apibox.io.vn/v1/email-inline" \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{"html":"<style>p{color:red} .big{font-size:20px} @media (max-width:600px){p{font-size:12px}}</style><p class=\"big\">Xin chào</p>"}'

const res = await fetch('https://apibox.io.vn/v1/email-inline', {
  method: 'POST',
  headers: {
    Authorization: 'Bearer YOUR_API_KEY',
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    "html": "<style>p{color:red} .big{font-size:20px} @media (max-width:600px){p{font-size:12px}}</style><p class=\"big\">Xin chào</p>"
  }),
});
const data = await res.json();
console.log(data);

import requests

res = requests.post(
    "https://apibox.io.vn/v1/email-inline",
    headers={"Authorization": "Bearer YOUR_API_KEY"},
    json={"html": "<style>p{color:red} .big{font-size:20px} @media (max-width:600px){p{font-size:12px}}</style><p class=\"big\">Xin chào</p>"},
    timeout=30,
)
print(res.json())

<?php
$ch = curl_init('https://apibox.io.vn/v1/email-inline');
curl_setopt_array($ch, [
    CURLOPT_RETURNTRANSFER => true,
    CURLOPT_CUSTOMREQUEST => 'POST',
    CURLOPT_HTTPHEADER => ['Authorization: Bearer YOUR_API_KEY', 'Content-Type: application/json'],
    CURLOPT_POSTFIELDS => '{"html":"<style>p{color:red} .big{font-size:20px} @media (max-width:600px){p{font-size:12px}}</style><p class=\\"big\\">Xin chào</p>"}',
]);
$response = curl_exec($ch);
print_r(json_decode($response, true));

API documentation → Get a free API key

FAQ

Why inline CSS at all?

Gmail apps, Outlook and many webmails drop or limit <style> blocks; inline styles are the only CSS every client applies.

Are media queries kept?

Yes, they stay in a <style> element in the head, where clients that support them (Apple Mail, Gmail web, iOS) use them.

Does it fix the warnings?

No, it reports them so you can rewrite with tables and widely supported properties.