This tool offers an easy way to encode CSS into Base64 format. While embedding CSS directly in the style tag is typically enough, there are scenarios where Base64 encoding becomes valuable. For example, it simplifies the inclusion of custom CSS in an HTML page by eliminating the need for manual escaping and validation. If your main goal is to convert images in CSS into Base64 data URIs, the CSS Data URI Converter might be a better option.
Steps to Convert CSS to Base64:
- Enter or paste your CSS code into the “CSS source” input field.
- If needed, choose the output format you prefer.
- Click the “convert” button to generate the encoded result.
Output Formats:
Not sure which output format suits your needs? The following examples demonstrate the same Base64-encoded CSS formatted in each available option:
- Plain Text:
Ym9keSB7DQogIGNvbG9yOnJlZA0KfQ== - Data URI:
data:text/css;base64,Ym9keSB7DQogIGNvbG9yOnJlZA0KfQ== - HTML Hyperlink:
<a href="data:text/css;base64,Ym9keSB7DQogIGNvbG9yOnJlZA0KfQ=="></a> - HTML Style Block:
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%20type%3D%22text%2Fcss%22%3E%0A%20%20%40import%20url(%22data%3Atext%2Fcss%3Bbase64%2CYm9keSB7DQogIGNvbG9yOnJlZA0KfQ%3D%3D%22)%3B%0A%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<style>" title="<style>" />
- HTML Stylesheet Link:
<link rel="stylesheet" type="text/css" href="data:text/css;base64,Ym9keSB7DQogIGNvbG9yOnJlZA0KfQ==" />
Base64 Output
