ES
Home › Developer Tools › CSS Inliner

CSS Inliner

Paste an HTML email that uses a <style> block and get the same email with every rule written into inline style attributes, the format Gmail, Outlook and other email clients handle best. Media queries and :hover rules stay in a style block, and a live preview shows the result.

Last updated:

Preview
Advertisement
Advertisement

How to use the CSS Inliner

  1. Paste your HTML email or open an .html file. Click Sample to try it.
  2. Pick the options: remove style blocks, keep media queries, keep !important, add width attributes.
  3. Click Inline CSS; the output updates as you type.
  4. Check the preview at desktop and mobile width.
  5. Copy or download the inlined HTML and paste it into your email platform.

Before and after inlining

The inliner reads each CSS rule, finds every element it matches and writes the winning declarations into that element's style attribute.

InputOutput
<style> p { font-size: 16px; } .muted { color: #666; } </style>
<p class="muted">Hi</p>		<p class="muted" style="font-size: 16px; color: #666;">Hi</p>
img.logo { width: 120px; }<img class="logo" style="width: 120px;" width="120">
a:hover { color: red; }Kept in a <style> block (cannot be inlined)
@media (max-width: 600px) { … }Kept in a <style> block for responsive clients

Specificity in short

SelectorSpecificity (id, class, type)
p0, 0, 1
.card td0, 1, 1
a.btn0, 1, 1
#footer p1, 0, 1
style="…" attributebeats any selector (unless the rule is !important)

HTML email tips

  • Use tables with role="presentation" for layout; flexbox and grid are not supported by many email clients.
  • Write colors as 6-digit HEX and sizes in px; shorthand values and rem units are less reliable in older clients.
  • Keep the total email size under about 100 KB: Gmail clips longer messages and hides the rest behind a link.
  • Always send a test to real inboxes after inlining, since every client has its own quirks.

Frequently asked questions

Why do HTML emails need inline CSS?

Many email clients strip or ignore style blocks in some situations, for example certain Gmail views, older Outlook versions and some webmail apps when an email is forwarded. Styles written directly in each element's style attribute are the most reliably supported, so inlining makes the email look the same everywhere.

Which rules cannot be inlined?

Media queries, :hover and :focus states, pseudo-elements like ::before, @font-face and @keyframes have no inline equivalent. With the keep option on they are collected into a single style block in the head, so clients that support them still use them.

How does the inliner decide which style wins?

It follows the CSS cascade: !important declarations beat normal ones, then higher specificity wins (id over class over tag), then the later rule wins. A style attribute already on the element counts as the most specific, so your manual overrides are kept.

Should I keep !important in the inline styles?

Usually not. Once a style is inline it already has top priority, and some clients handle !important inline badly. Keep the option off unless you need it to beat a client's own styles. !important rules inside media queries are always kept, because they must override the inline styles.

Is my email template uploaded anywhere?

No. Parsing and inlining run entirely in your browser using the built-in HTML parser, and the preview is rendered in a sandboxed frame with scripts disabled. Nothing is sent to a server.

Why are width and height attributes added?

Some versions of Outlook ignore CSS widths on images and tables but respect the HTML width and height attributes. The inliner copies pixel values from the CSS into those attributes so the layout holds.

Does it support external stylesheets?

Linked stylesheets cannot be fetched from the browser for privacy and security reasons. Copy the CSS file's contents into a style block in the head and run the inliner again.

Are all the tools on FreeToolCabin tested for quality and accuracy?

Yes! Every tool on our site undergoes automated Q/A testing in real browser environments to ensure high precision, correct output, and zero errors. If you happen to spot a bug or have a suggestion, please contact us at [email protected] and our team will review it right away.

Related tools

HTML MinifierMinify HTML: strip comments and whitespace safely and see how many bytes you save.HTML FormatterBeautify and indent HTML code with a live preview.CSS MinifierMinify CSS with csso or a built-in engine and see the size saved instantly.Spam Word CheckerScan an email subject and body for spam trigger words, excess caps, exclamation marks and risky links.Open Graph PreviewPaste OG tags and preview how links look on Facebook, X and LinkedIn.YouTube Embed Code GeneratorCreate responsive YouTube embed code with start time, autoplay, loop and privacy mode.CSS Box Shadow GeneratorDesign layered CSS box shadows with a live preview, presets and one-click Copy CSS.CSS Border Radius GeneratorRound each corner, draw elliptical 8-value radii or random blob shapes and copy the CSS.CSS Button GeneratorDesign CSS buttons with gradients, borders, shadows and hover and active states, then copy the code.CSS Flexbox GeneratorBuild flexbox layouts visually: set container and item properties, then copy the CSS and HTML.Twitter Card GeneratorCreate X / Twitter Card meta tags with Open Graph fallbacks, character counters and a live preview.CSS Grid GeneratorDraw CSS grid layouts: set tracks and gaps, drag to name areas, then copy the CSS and HTML.PX to REM ConverterConvert px to rem or em and back, with a 1-100px table and a whole-CSS converter.Glassmorphism CSS GeneratorDesign frosted-glass UI cards with blur, transparency and border sliders, then copy the CSS.CSS Text Shadow GeneratorLayer CSS text shadows with a live preview and neon, 3D, outline and retro presets.HTML Editor (Live Preview)Write HTML, CSS and JavaScript and see a live, sandboxed preview as you type.HTML to JSX ConverterConvert HTML to valid React JSX: className, htmlFor, style objects, self-closing tags and events.CSS Clip-Path GeneratorDraw CSS clip-path shapes by dragging points: polygons, circle, ellipse and inset. Copy the CSS.CSS Animation GeneratorCreate CSS keyframe animations from 23 presets with live preview, timing controls and Copy CSS.CSS Triangle GeneratorMake CSS triangles in 8 directions with the border trick or clip-path. Set size and color, copy CSS.CSS Loader GeneratorPick from 14 pure CSS spinners and loaders, set color, size and speed, then copy the HTML and CSS.Cubic Bezier GeneratorDrag the control points to design a CSS easing curve, compare it with linear and copy cubic-bezier().CSS Filter GeneratorAdjust blur, brightness, contrast, hue, sepia and drop-shadow on an image and copy the CSS filter.CSS Specificity CalculatorCalculate CSS selector specificity (a, b, c), including :is(), :not(), :has() and :where(), and compare.Google Maps Embed GeneratorTurn an address or coordinates into responsive Google Maps iframe embed code, no API key.Neumorphism CSS GeneratorDesign soft UI neumorphic shapes with live preview and copy the box-shadow CSS.SVG Wave GeneratorMake layered SVG waves for section dividers and export SVG, PNG or a CSS background.SVG Blob GeneratorGenerate random organic SVG blob shapes with gradients and export SVG, PNG or CSS clip-path.CSS Clamp GeneratorTurn min/max sizes and viewport widths into a fluid CSS clamp() value in rem and vw.CSS @font-face GeneratorTurn font files or URLs into ready-to-paste @font-face rules with weights, styles and a preview.CSS Media Query GeneratorBuild @media rules for widths, orientation, dark mode and hover, or get framework breakpoints.CSS Scrollbar GeneratorStyle scrollbars: width, colors, radius and hover, with ::-webkit-scrollbar and scrollbar-color CSS.CSS Sprite GeneratorPack many icons into one sprite sheet PNG and get CSS classes with background-position.CSS Text Gradient GeneratorMake gradient text with background-clip:text: color stops, angle, font preview and fallback CSS.CSS Toggle Switch GeneratorDesign pure-CSS toggle switches: size, colors, shape and animation. Copy accessible HTML + CSS.CSS Tooltip GeneratorBuild pure CSS tooltips: position, arrow, colors, padding and animation. Copy HTML and CSS.HTML Form BuilderDrag and drop form fields with labels and validation, then copy accessible HTML and CSS code.Iframe GeneratorCreate iframe embed code: size or responsive ratio, border, allow, sandbox, lazy load, live preview.Tailwind CSS Cheat SheetSearchable Tailwind class to CSS reference with live previews, class decoder and color palette.Web App Manifest GeneratorCreate a PWA manifest.json and every app icon size from one image, downloaded as a ZIP.CSS Background Pattern GeneratorMake pure-CSS stripes, dots, checkerboard, zigzag and grid backgrounds and copy the code.CSS Color Filter GeneratorTurn a HEX color into a CSS filter that recolors black icons and SVGs, with an accuracy score.CSS Gradient Animation GeneratorCreate animated gradient backgrounds: pick colors, angle and speed, preview live and copy the CSS.CSS Hover Effects GeneratorPick button, link and image hover effects, tweak colors and timing, and copy the HTML and CSS.CSS Shape Divider GeneratorCreate wave, tilt, curve and triangle section dividers and copy the SVG, HTML and CSS.CSS Transform GeneratorRotate, scale, skew and translate an element with sliders and copy the CSS transform code.Font Pairing ToolPreview Google Font heading and body pairs on real layouts and copy the embed code and CSS.HTML Accessibility CheckerPaste HTML to find WCAG accessibility problems with impact level, the failing element and a fix.HTML Image Map GeneratorDraw clickable rectangle, circle and polygon hotspots on an image and get image map HTML.SVG ViewerOpen or paste SVG code to preview it live with zoom, backgrounds, size info and PNG export.Pathfinding VisualizerAnimate BFS, DFS, Dijkstra, A* and greedy search on a grid with walls, weights and mazes.PX to VW ConverterConvert pixels to vw and vh for any viewport size, and vw/vh back to px, with breakpoint tables.SVG Path EditorEdit an SVG path d attribute visually: drag points, edit commands, convert, scale and minify.SVG to CSS Data URITurn SVG code into a small URL-encoded data URI for CSS backgrounds, with Base64 size comparison.SVG to JSXTurn SVG code into a clean React component: camelCase attributes, style objects, TypeScript.
See all 52 Web, HTML & CSS Tools →