CSS to Base64

CSS to Base64 Encoder and Data URI Generator

This tool encodes CSS stylesheets to Base64 and generates data:text/css;base64,... URIs, and it decodes Base64 back into readable CSS. It's handy when you need a stylesheet that travels with the page instead of living in a separate file.

Stylesheets without a file

Enable Output as data URI and drop the result into a link element:

<link rel="stylesheet" href="data:text/css;base64,Ym9keXttYXJnaW46MH0=">

That string is just body{margin:0}. The browser applies it exactly like a stylesheet served from your domain. The same URI works with @import url("data:text/css;base64,...") inside another stylesheet, and with JavaScript that creates a <link> element dynamically, a common technique in bookmarklets, browser extensions, and embeddable widgets that must not depend on external hosting.

Why not just use a style tag?

A <style> block is simpler for a single page, but a data URI is sometimes the only option: when a system accepts only a stylesheet URL (many site builders, theme settings, and ad or email platforms), when you generate single-file HTML reports, or when a style must be passed as one attribute value through a template engine. Base64 also avoids escaping problems with quotes, </style> sequences, and non-ASCII characters in content: "→" rules.

Decoding embedded CSS

Minified bundles, email templates, and exported HTML sometimes contain long data:text/css;base64 strings. Paste one into Base64 to CSS and the original rules come back, ready to review or download as a .css file.

Tips

Minify CSS before encoding to keep the URI short, and keep data-URI stylesheets small since they can't be cached independently. For fonts and background images inside the CSS, encode the image itself with Image to Base64. To embed markup instead, use HTML to Base64.