CodesBeautify

Base64 to CSS Converter

Decode Base64 into a stylesheet, or wrap encoded image bytes in a complete background rule.

Base64
CSS
Runs locally in your browser

About the Base64 to CSS Converter

Base64 meets CSS in two quite different ways, and this tool handles both. Sometimes the encoded payload is a stylesheet, pulled out of a build artefact, a theme record or a data:text/css URI, and you simply want to read it. Sometimes the payload is an image and what you actually need is a working declaration that puts it on the page.

Detection mode looks at the decoded bytes and picks. If they read as text you get the stylesheet, formatted exactly as it was encoded, with CSS syntax highlighting and a count of the rule blocks it contains. If they contain the control byte pattern of a compressed or binary format, the tool identifies the image type from the file signature and builds a complete rule instead.

That generated rule is not just the URL. It includes background-repeat, background-position and background-size so the image behaves predictably as soon as you paste it, and the selector is yours to set. PNG, JPEG, GIF, WebP, AVIF and BMP signatures are recognised, which matters because a wrong MIME type in a data URI makes some browsers refuse to paint the image at all.

Either mode can be forced from the dropdown when the guess is wrong. Once you have readable CSS, CSS Beautifier will tidy the indentation and CSS Minifier will shrink it again for production.

How to use

  1. Paste the Base64 stylesheet or image payload into the left pane.
  2. Leave Result on detect, or force source or background mode if you know what the bytes are.
  3. When a rule is generated, set the Selector to the class or id you use.
  4. Copy the CSS into your stylesheet.

Common questions

How does detection decide between source and image?
It counts control bytes in the decoded data. Text has almost none, while compressed image formats are full of them.
Which image types produce a correct MIME in the rule?
PNG, JPEG, GIF, WebP, AVIF and BMP are recognised from their file signatures rather than from any prefix you paste.
Can I change the selector after copying?
Of course. The selector field is only there so the rule pastes in ready to use.
Should I inline images in CSS at all?
For small icons and gradients it saves a request. Larger images lose separate caching and bloat every page that loads the stylesheet.