About

Base64 encoding inflates CSS file size by approximately 33% compared to raw text. Embedded stylesheets using data:text/css;base64,... URIs bypass additional HTTP requests but obscure the underlying rules from inspection and debugging. Misidentifying a corrupted Base64 payload - a single missing pad character (=) or an illegal byte - produces silent rendering failures where styles simply vanish without browser console errors. This tool decodes Base64 strings back to readable CSS, validates the input encoding, and applies syntax formatting so you can audit every selector, property, and value before deployment.

The converter handles both raw Base64 strings and full data URI schemes. It strips the data:[mediatype];base64, prefix automatically before decoding. Note: this tool assumes UTF-8 encoded CSS input. Multi-byte characters outside the ASCII range that were incorrectly encoded at source will produce garbled output - always verify the original encoding chain. Pro tip: if you are extracting Base64 CSS from a bundled JavaScript file, ensure you capture the complete string including trailing = padding characters.

Formulas

Base64 encodes binary data by mapping every 3 bytes (24 bits) to 4 ASCII characters from a 64-character alphabet. The encoded output size is calculated as:

S_encoded = 4 ⋅ ceil(S_original3)

where S_original = size of the raw CSS in bytes, and S_encoded = resulting Base64 string length in characters. The overhead ratio converges to exactly 43 ≈ 1.333, yielding the fixed 33.3% inflation.

The decoding process reverses this mapping. Each Base64 character is converted to its 6-bit index value. Four characters produce 24 bits, which split into 3 original bytes:

byte₀ = (idx₀ « 2) | (idx₁ » 4)

byte₁ = ((idx₁ & 0xF) « 4) | (idx₂ » 2)

byte₂ = ((idx₂ & 0x3) « 6) | idx₃

where idx_n = the 6-bit integer value of the n-th Base64 character. Padding characters (=) signal that the final group contains fewer than 3 bytes: one = means 2 bytes remain, two = means 1 byte remains.

Reference Data

Data URI Prefix	Media Type	Use Case	Size Overhead
data:text/css;base64,	CSS Stylesheet	Inline <link> or @import	33%
data:text/html;base64,	HTML Document	Iframe sources	33%
data:application/json;base64,	JSON	Config embedding	33%
data:image/png;base64,	PNG Image	CSS background-image	33%
data:image/svg+xml;base64,	SVG Vector	Icons, logos	33%
data:font/woff2;base64,	WOFF2 Font	@font-face embedding	33%
data:application/javascript;base64,	JavaScript	Script embedding	33%
data:text/plain;base64,	Plain Text	Generic text data	33%
data:image/jpeg;base64,	JPEG Image	Photo embedding	33%
data:image/webp;base64,	WebP Image	Modern image format	33%
Base64 Character Set (RFC 4648)
Index Range	Characters	Count	Purpose
0 - 25	A - Z	26	Uppercase alphabet
26 - 51	a - z	26	Lowercase alphabet
52 - 61	0-9	10	Digits
62	+	1	62nd value
63	/	1	63rd value
-	=	0 - 2	Padding (mod 3 alignment)
Encoding Size Examples
Original CSS Size	Base64 Encoded Size	Overhead	Padding Chars
1 KB	1.37 KB	370 B	0 - 2
5 KB	6.83 KB	1.83 KB	0 - 2
10 KB	13.65 KB	3.65 KB	0 - 2
50 KB	68.27 KB	18.27 KB	0 - 2
100 KB	136.53 KB	36.53 KB	0 - 2

Frequently Asked Questions

The converter automatically detects and strips any data URI prefix matching the pattern data:[mediatype];base64, before decoding. You can paste the full data URI or just the raw Base64 payload - both produce identical CSS output. The stripped prefix is discarded since it carries no stylesheet data.

All whitespace characters (spaces, tabs, newlines, carriage returns) are silently stripped before validation and decoding. This is necessary because many systems split Base64 into 76-character lines per RFC 2045 (MIME). The tool normalizes the input regardless of line-wrapping format.

This typically indicates an encoding mismatch. The tool assumes the original CSS was encoded as UTF-8 before Base64 conversion. If the source used Latin-1, Shift-JIS, or another encoding, multi-byte sequences will not decode correctly. Verify the encoding chain at the source. Another common cause is an incomplete Base64 string - truncation corrupts the final byte group.

This tool is a one-directional decoder: Base64 to CSS. Encoding CSS to Base64 requires the inverse operation (btoa in JavaScript). A dedicated CSS-to-Base64 encoder would be the appropriate tool for that direction.

The converter runs entirely in the browser. Practical limits depend on the device's available memory. The native atob function handles strings up to several megabytes reliably on modern browsers. For CSS files exceeding 5 MB in encoded form, expect noticeable decode latency. The tool displays input and output byte sizes for your reference.

No. Syntax highlighting is purely visual - applied via HTML <span> elements in the display layer only. The underlying decoded CSS string remains untouched. When you copy or download the output, you receive the raw decoded CSS text with no highlighting markup.

The beautifier uses a brace-matching state machine. It tracks nesting depth by counting { and } characters while respecting string literals and comments. Each nested block increases indent by 2 spaces. Semicolons trigger line breaks. The algorithm does not parse CSS semantics - it formats based on structural tokens only, which means malformed CSS will still be formatted but may look unusual.