CSS to Base64

Encode a CSS stylesheet (paste text or drop a .css file) to Base64, producing a data:text/css;base64,… data URI you can inline in a <link> or @import. Everything runs in your browser — nothing is uploaded.

Note: to embed an image inside CSS (for example background-image), you convert the image to Base64, not the CSS. Use the Data URI Generator for that, then paste the result into your stylesheet.

How to convert CSS to Base64

There are two ways to use the encoder above. Either paste your CSS into the input box, or drop a .css file onto the drop zone (or click to browse). Either way the stylesheet is Base64-encoded locally, and two outputs appear instantly: the full data:text/css;base64,… data URI and the raw Base64 on its own. Click Copy on whichever you need.

Inlining a stylesheet as a data URI

Once you have the data:text/css;base64,… string, you can drop it straight into a <link> tag so the browser applies the styles with no extra request:

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

It also works inside a stylesheet via @import:

@import url(data:text/css;base64,Ym9keXttYXJnaW46MH0=);

Inlining a stylesheet this way saves a round trip, which can help for tiny critical CSS. The tradeoff is the same as any data URI: Base64 adds ~33% size overhead and the inlined CSS can't be cached separately from the document that carries it. Keep it for small stylesheets; serve larger ones as normal files. See Data URIs Explained for the full picture.

Embedding images in CSS vs encoding CSS

These are two different jobs and it's easy to conflate them. Encoding CSS to Base64 (what this tool does) turns the stylesheet text into a data URI so you can inline the whole stylesheet. Embedding an image in CSS is the opposite direction: you encode the image file and paste its data URI into a rule like background-image: url(data:image/png;base64,…). For that, use the Data URI Generator or Image to Base64 and drop the resulting string into your CSS — you don't Base64-encode the CSS to embed an image.

Is this private?

Yes. Encoding runs fully in the browser with JavaScript — your CSS is read into memory and Base64-encoded locally, and nothing is uploaded to any server. You can confirm in DevTools → Network: encoding fires no request.

Frequently asked questions

How do I convert CSS to Base64?

Paste your CSS into the input above, or drop a .css file. The tool Base64-encodes the stylesheet locally and produces a data:text/css;base64,… data URI plus the raw Base64. Click Copy to grab either one.

How do I inline a CSS file as a data URI?

Put the data:text/css;base64,… string in the href of a <link rel="stylesheet"> tag, or use it inside a CSS @import url(data:text/css;base64,…) rule. The browser decodes the Base64 and applies the styles with no separate request.

How do I embed an image inside CSS?

You encode the image, not the CSS. Convert the image file to a data URI and drop it into a background-image: url(data:image/png;base64,…) rule. Use the Data URI Generator or Image to Base64 for that, then paste the result into your stylesheet.

Is encoding CSS to Base64 private?

Yes. The encoding runs entirely in your browser with JavaScript — your CSS is read into memory and Base64-encoded locally, and nothing is uploaded to any server.