CSS to Inline Styles Converter
Convert CSS rules to inline style attributes for HTML emails and templates.
Input CSS
Inline Style Snippets
CSS to Inline Examples
Convert CSS rules into inline style snippets for email or HTML. Example:
Heading and button styles
Input CSS:
Inline snippets output:
Use Sample above to load more example data.
What Is CSS to Inline Styles?
You've written clean CSS, but now you need to send an HTML email — and your beautifully crafted stylesheet gets stripped the moment it hits Gmail or Outlook. That's the classic email CSS problem. MDN's CSS reference covers the full property set, but email clients don't follow the spec. Can I Email documents exactly which clients support which CSS properties — and the answer is often "not the ones you want." The only reliable solution is inline style attributes directly on each HTML element. Litmus has a detailed guide on CSS inlining for email. This tool converts your CSS rules into style="..." snippets you can paste straight into your HTML markup. The HTML style attribute spec defines exactly what's supported.
Your email stylesheet is turned into attribute strings by script on this page, so campaign markup that has not gone out yet stays on your machine. What you get back can be pasted straight into HTML. For full HTML email inlining (matching selectors to elements), use a dedicated tool like Juice or similar. This tool generates style snippets from CSS rules.
How to Use This Tool
Paste or Upload CSS
Put the stylesheet from your email template in the left pane, either pasted or loaded from a .css file with Upload. Sample loads a few rules to show the output format. CSS that cannot be parsed comes back as an error message.
Review the Inline Snippets
The right panel shows style snippets for each rule. Each snippet is a style="..." string you can add to HTML elements. Selectors are listed so you know which element gets which styles.
Copy or Download
Once the snippets look right, Copy or Download them and drop each one onto the matching tag in your template. For formatting CSS first, use the CSS Formatter. For minifying, use the CSS Minifier.
How the Conversion Works
The tool parses your CSS rules and converts each declaration block into a style="property: value; ..." string. Selectors are listed so you know which snippet applies to which element. The output follows HTML style attribute syntax. For full HTML+CSS inlining (matching selectors to elements automatically), tools like Juice or Can I Email document email client support.
When CSS to Inline Helps
Email HTML is the most common use case. Gmail, Outlook, and many clients strip <style> tags and external stylesheets. Inline styles are the most reliable way to style email. Converting your CSS here gives you snippets to add to <td>, <div>, and other elements.
CMS systems, PDF generators, or legacy tools that accept HTML but not CSS files often need inline styles. Converting here provides the format they expect. For vendor prefixes before inlining, use the CSS Prefixer. For formatting or minifying CSS first, use CSS Formatter or CSS Minifier.
Frequently Asked Questions
Does it inline into full HTML?
This tool generates style snippets from CSS rules. It doesn't parse HTML and apply styles to elements. For full conversion (HTML + CSS to HTML with inline styles), use a tool like Juice or similar.
Is my data private?
Yes. Turning rules into style strings happens inside this browser tab, and the CSS is never posted to a server.
What about pseudo-classes?
Pseudo-classes like :hover and ::before can't be inlined. Inline styles only support static properties. Use them for base styles; email clients may support limited <style> for hover.
What about media queries?
Media queries can't be inlined. Inline styles are per-element. For responsive email, use a hybrid approach: inline base styles and <style> for media queries where supported.
Specificity and inheritance?
Inline styles have high specificity. When you paste a snippet into an element, it overrides most other styles. Order matters when multiple rules apply to the same element.
Related Tools
For the CSS specification, see W3C CSS. MDN CSS is the reference. Can I Email documents email client support for CSS.