CSS Inliner

Convert stylesheet rules into inline style attributes. Essential for HTML email templates.

HTML Input: 203 charsCSS Input: 496 charsInlined Output: 0 chars

HTML Source

CSS (external/additional)

Output (inlined HTML)

Why inline CSS for emails?

Email clients like Gmail, Outlook, and Apple Mail strip or ignore <style> tags and linked stylesheets. Moving all CSS declarations into style="" attributes ensures consistent rendering across every email client. This tool parses your CSS selectors, applies specificity ordering, and injects the computed styles directly onto each element.

Built and maintained by Meet Shah · Last updated 28 July 2026

What this tool is used for

Converting a stylesheet into inline attributes for an HTML email.
Preparing markup for a client that strips style blocks.
Inlining critical styles for a self-contained document.
Producing an email template from a normal stylesheet.
Checking which rules survive inlining and which cannot.

Frequently Asked Questions

Why does HTML email need inline CSS?: Because Gmail strips `<style>` blocks in several contexts, including its mobile apps and any forwarded message. A `style` attribute on the element survives, so inlining is not a preference — it is what makes the design appear at all for a large share of recipients.
How does specificity affect inlining?: It has to be resolved before the styles move. Two rules matching the same element produce one inline declaration, and which wins is decided by specificity and order exactly as the cascade would — an inliner that processes rules in file order without weighting them gets this wrong.
What cannot be inlined?: Anything with no element to attach to: media queries, pseudo-classes like `:hover`, pseudo-elements, and keyframes. Those have to stay in a `<style>` block as a progressive enhancement, which is why a good email has both an inlined body and a head block.
Does inlining increase the message size?: Substantially — a shared rule is repeated onto every matching element. Gmail clips messages over about 102 KB and shows a "view entire message" link, which truncates the tracking pixel at the bottom too, so size has a real consequence beyond bandwidth.
Should I write the CSS inline by hand?: No. Author in a stylesheet and inline at build time, which is what every email framework does. Hand-maintained inline styles cannot be changed consistently, and the first restyle proves it — which is the whole reason inliners exist as tooling.

Common errors and gotchas

Expecting media queries and pseudo-classes to inline, which they cannot — they must stay in a style block.
Losing specificity relationships, since every inlined rule now has the same weight.
Inlining so much that the message exceeds a client's size limit and gets clipped.
Assuming inlining fixes email rendering, when client support is the larger problem.
Inlining a stylesheet with descendant selectors that no longer apply once flattened.