Home » CSS to Base64 Converter

CSS to Base64 Converter

CSS to Base64

This tool offers an easy way to encode CSS into Base64 format. While this is not always necessary—since the <style> tag allows CSS to be embedded directly as source code—it can come in handy in certain scenarios. For example, if you want to include user-defined CSS in an HTML page without the hassle of escaping and validating it, this tool could save time. If your goal is to convert images from CSS into Base64 data URIs, consider using the CSS Data URI Converter.

Steps to Convert CSS to Base64:

  1. Enter or paste your CSS code into the “CSS source” input field.
  2. If needed, choose the output format you prefer.
  3. 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="&lt;style&gt;" title="&lt;style&gt;" />
    
    
  • HTML Stylesheet Link:
    <link rel="stylesheet" type="text/css" href="data:text/css;base64,Ym9keSB7DQogIGNvbG9yOnJlZA0KfQ==" />
    
    

     

Base64 Output