CodesBeautify

CSS to Base64 Converter

Encode a stylesheet as Base64, a data URI or a self contained link tag.

CSS
Base64
Runs locally in your browser

About the CSS to Base64 Converter

Encoding a stylesheet is how you carry it somewhere that will not accept a file: an email template preview, a sandboxed iframe built from a string, a JSON field in a theme API, or a bookmarklet that has to bring its own styles. The Base64 form survives quoting, escaping and copy paste in a way that raw CSS with its braces and quotes does not.

Three output shapes are offered. Raw Base64 is the payload on its own for storing in a field. The data URI adds the data:text/css;charset=utf-8;base64, prefix so it can be dropped into an href or an import. The link tag wraps that URI in a complete stylesheet element, ready to paste into the head of a document that has nowhere to host a real file.

The strip option removes comment blocks and collapses the whitespace around braces, colons, semicolons and commas before encoding. It cuts a typical stylesheet by a third and is safe for ordinary declarations, though it is deliberately conservative and leaves the CSS readable rather than attempting the aggressive rewrites a dedicated minifier performs. The status line shows the source size next to the encoded length so you can see the roughly one third growth Base64 always adds.

For production builds reach for CSS Minifier first and encode the result. Decode an existing string with Base64 to CSS.

How to use

  1. Paste your stylesheet into the left pane.
  2. Choose Output as: raw Base64, a data URI, or a full link tag.
  3. Tick Strip comments and whitespace to cut the payload before it is encoded.
  4. Copy the result into your template, field or document head.

Common questions

Will a link tag with a data URI actually load?
Yes in ordinary pages, though a strict Content Security Policy can block data URIs for stylesheets, so test it in the target environment.
Is the strip option a real minifier?
No. It removes comments and redundant whitespace only. A dedicated minifier also shortens colours and merges declarations.
Why does the encoded text grow?
Base64 uses four characters for every three bytes, so expect about a third more, plus the prefix if you choose a data URI.
Are non-ASCII characters in content values safe?
Yes. The stylesheet is encoded as UTF-8 first and the charset is declared in the data URI.