Encode · Inline · Snippet

CSS to Base64
Encoder

Encode CSS stylesheets to Base64, inline binary assets inside url() declarations, generate @font-face and background-image snippets, and decode Base64 back to CSS all privately in your browser.

Input:
Output:
CSS Input0 chars
Base64 Output0 chars
0Input Chars
0Base64 Chars
0UTF-8 Bytes
Overhead
4
Tool Tabs
7
CSS Snippet Types
0ms
Server Latency
100%
Private & Secure
How It Works

CSS to Base64 in Three Steps

No sign-up, no server uploads. Paste, encode, and copy in seconds.

1

Paste CSS or Upload a File

Type or paste raw CSS text into the input, or upload a .css file from disk. The encoder reads the stylesheet using TextEncoder or FileReader entirely in your browser, no network request made.

2

Encode to Base64 or Data URI

CSS text is converted to UTF-8 bytes and then encoded as a Base64 string. Toggle to Data URI mode to wrap the output as data:text/css;base64,… ready to use directly as an HTML <link href="…"> stylesheet.

3

Copy, Download or Generate Snippets

Copy the Base64 or data URI to clipboard, download as a text file, or head to the Snippets tab to generate @font-face, background-image, or inline HTML embed snippets pre-filled with your encoded data.

Tool Features

A Complete CSS Base64 Toolkit

Encode, decode, inline assets, and generate snippets all in one private browser tool.

🎨

CSS → Base64 & Data URI

Paste CSS or upload a .css file and encode it instantly. Toggle between raw Base64 and a full data:text/css;base64,… URI. Live stats show input chars, Base64 length, byte count, and size overhead.

🔓

Base64 → CSS Decoder

Decode any Base64 string or data:text/css;base64,… URI back to readable CSS. The data URI prefix is auto-stripped. Download the result directly as a .css file with one click.

🖼

Asset → CSS url()

Upload any image, font, or SVG and generate the correct url('data:…;base64,…') value. A preview card shows the asset, and a ready-to-paste CSS declaration is generated automatically.

💻

7 CSS Snippet Types

Generate complete, ready-to-use snippets: background-image, @font-face, list-style-image, border-image, content pseudo-element, HTML <link> tag, and inline <style> embed all pre-filled with your Base64 payload.

📊

Live Encoding Stats

Instantly see the input character count, Base64 output length, UTF-8 byte count, and size overhead percentage as you type. Helps you evaluate whether inlining is practical or if a hosted URL is more efficient.

🔒

100% Private

All encoding and decoding uses native browser APIs TextEncoder, btoa(), atob(), FileReader. Nothing is transmitted anywhere. Safe for proprietary stylesheets and unreleased design system files.

Use Cases

When You Need CSS as Base64

Base64 CSS and inline CSS assets solve real problems across front-end development and deployment.

01

Inline Fonts with @font-face

Embed a custom font directly in a stylesheet using a Base64 data URI inside @font-face src:. Eliminates a separate font file HTTP request, ensures the font loads instantly with the stylesheet, and prevents flash of unstyled text in print or offline scenarios.

02

Single-File HTML Documents

When building self-contained HTML files email templates, offline reports, portable demos encode your stylesheet to Base64 and reference it as a <link href="data:text/css;base64,…"> so the entire document and all its styles live in one file.

03

Inline Background Images & Icons

Small decorative images, SVG icons, and repeating patterns can be embedded directly in CSS as background-image: url('data:image/…;base64,…'). Removes extra HTTP requests for assets that are too small to justify a separate file or CDN entry.

04

CSS-in-JS & Styled Components

When generating CSS programmatically in JavaScript Styled Components, Emotion, CSS Modules Base64 asset strings can be embedded directly in template literals. Encode your assets here and paste the output into your component styles.

05

Browser Extension Stylesheets

Chrome and Firefox extensions inject content scripts that include CSS. Encoding the stylesheet as a Base64 data URI can simplify how injected styles are bundled and referenced in the extension manifest without needing a separate file entry.

06

Dynamic Style Injection

Encode a stylesheet and create a <link> element dynamically in JavaScript using the data URI as the href. This lets you inject an entire stylesheet at runtime without a server fetch useful for theming, A/B testing, and feature flags.

How It Works Technically

CSS Base64 Encoding Explained

CSS is plain text. Encoding it to Base64 converts each character to its UTF-8 byte representation, then encodes those bytes as Base64 using btoa(). The resulting string is purely ASCII and safe to embed anywhere text is expected.

The most common use is in CSS url() declarations, where binary assets images, fonts, SVGs are encoded and embedded directly. This eliminates extra HTTP requests and makes the stylesheet self-contained. The correct format is url('data:<mime>;base64,<data>').

For encoding multi-byte UTF-8 CSS (emoji, non-ASCII comments), btoa() alone fails because it only handles Latin-1 characters. The correct approach uses TextEncoder to get UTF-8 bytes first, then maps them through String.fromCharCode before passing to btoa().

// CSS text → Base64 (UTF-8 safe)
 
function cssToB64(css) {
  // 1. CSS → UTF-8 bytes
  const bytes =
    new TextEncoder().encode(css);
 
  // 2. Bytes → binary string
  const bin = Array.from(bytes,
    b => String.fromCharCode(b)).join('');
 
  // 3. Binary string → Base64
  return btoa(bin);
}
 
// Full data URI:
const uri =
  `data:text/css;base64,
   ${cssToB64(css)}`;
 
// Use as stylesheet href:
link.href = uri;
FAQ

Frequently Asked Questions

Everything you need to know about CSS and Base64 encoding.

Yes. You can use a CSS data URI as the href of a <link rel="stylesheet"> element: <link rel="stylesheet" href="data:text/css;base64,…">. This is supported in all major browsers. It's most useful for self-contained HTML documents, email templates, and browser extensions where loading a separate CSS file is inconvenient.
btoa() only accepts Latin-1 (ISO-8859-1) characters byte values 0–255 as individual characters. CSS that contains multi-byte UTF-8 characters such as non-ASCII comments, emoji, or right-to-left text in content: values will throw a InvalidCharacterError. The correct approach is to first encode the CSS to UTF-8 bytes using TextEncoder, then convert each byte to a character code before passing to btoa(). This tool handles this automatically.
Use the Asset → CSS url() tab: upload your WOFF2, WOFF, or TTF font file. The tool generates a complete @font-face rule with the Base64-encoded font embedded in the src: declaration. Copy and paste it directly into your stylesheet. Alternatively, use the CSS Snippets tab, select "@font-face", paste your Base64, and set the font family name.
Base64 encoding increases file size by approximately 33%. For small assets icons under 2–3 KB, tiny fonts, SVG sprites inlining is usually a net win because it eliminates HTTP request overhead. For larger files, the overhead often outweighs the saved request: a 50 KB font becomes a 67 KB Base64 string, and because it's embedded in the CSS file, it also prevents the stylesheet from caching independently. Use inlining selectively.
A CSS data URI is a URL scheme that embeds data directly inline rather than linking to an external file: data:text/css;base64,… for a stylesheet, or data:image/png;base64,… inside a url() declaration. Use them when you want a fully self-contained document with no external dependencies offline HTML files, email templates, browser extensions, or portable design demos.
Yes, but for SVGs specifically there is a more efficient alternative: URL-encoding the raw SVG markup rather than Base64-encoding it. URL-encoded SVGs are smaller than Base64 SVGs because SVG is already text, and Base64 adds ~33% overhead. However, Base64 is universally supported and requires no escaping of special characters. Use the Asset → CSS url() tab to generate either format from an uploaded SVG file.
No. All encoding uses native browser APIs: TextEncoder, btoa(), atob(), and FileReader. Nothing is transmitted over the network. The tool works fully offline after the initial page load, making it safe for proprietary stylesheets, unreleased design tokens, and confidential brand assets.
The CSS → Base64 tab encodes CSS text itself the stylesheet content as Base64. This is for when you want to load or transmit the whole CSS document as a data URI or encoded string. The Asset → CSS url() tab encodes a binary asset (image, font, SVG) and generates a CSS url() value to embed that asset inside a stylesheet. They serve different purposes.