Encode a CSS stylesheet to Base64, a data URI, or a <link> tag, and decode back. Runs in your browser; nothing is uploaded.
How to encode CSS to Base64 and decode Base64 to CSS
CSS to Base64: paste or open a CSS stylesheet on the left. Choose Data URI (data:text/css;base64,...), Raw Base64, or <link> tag (<link rel="stylesheet" href="data:text/css;base64,...">) on the right.
Base64 to CSS: paste raw Base64, a data:text/css;base64, URI, or a full <link> / @import url(...) snippet into the Base64 pane to recover the UTF-8 CSS source.
Frequently asked questions
How do I embed a Base64 CSS stylesheet in HTML?
Select the "<link> tag" output format to generate <link rel="stylesheet" href="data:text/css;base64,...">, or use the "Data URI" format inside an @import url("data:text/css;base64,...") rule.
How do relative url(...) paths inside a Base64-encoded stylesheet behave?
Because a data:text/css URI has no base directory URL, relative paths like url("../img/bg.png") inside the stylesheet cannot be resolved by the browser. Use absolute HTTPS URLs or inline small assets as data:image/... URIs.
Can I decode an existing <link href="data:text/css;base64,..."> snippet?
Yes. Paste the entire <link> tag, @import rule, data URI, or raw Base64 string into the Base64 pane and the tool extracts and decodes the UTF-8 CSS automatically.