Email CSS Inliner API

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

POSThttps://apibox.io.vn/v1/email-inline

Content & HTML▶ Try it online

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.

Parameters

Name	In	Type	Required	Default
`html`	body	string	yes		The e-mail HTML (max 2 MB).
`keep_style_tags`	body	boolean	no	`false`	Keep the original <style> blocks.

Example

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));

Response

{
  "html": "<!DOCTYPE html><html><head><style>@media (max-width:600px){p{font-size:12px}}</style></head><body><p class=\"big\" style=\"color: red; font-size: 20px\">Xin chào</p></body></html>",
  "stats": {
    "rules": 2,
    "applications": 2,
    "unmatched_selectors": 0,
    "kept_in_style_tag": 1,
    "size_kb": 0
  },
  "warnings": []
}

Use cases

Prepare newsletters and transactional e-mails before sending
Build pipelines for e-mail templates (MJML-less)
Check templates for Outlook problems in CI
Clean HTML pasted from design tools

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.

Related APIs

M↓

Email CSS Inliner API

Parameters

Example

Response

Use cases

FAQ

Related APIs

HTML to Markdown

Markdown to HTML

HTML Sanitizer