Base64 to CSS

Paste a Base64 string to get a ready-to-use CSS background-image rule or decoded stylesheet.

Last updated: May 29, 2026

Base64 input

CSS output

Image Base64: When you paste a Base64-encoded image the tool generates a ready-to-use CSS background-image rule. For Base64-encoded CSS text the decoded stylesheet is returned directly.

Client-Side Processing

Input Data Stays on Device

Instant Local Execution

Find this tool useful? Support the project to keep it free!

Buy me a coffee

What is Base64 to CSS?

Base64 to CSS decodes a Base64-encoded string and produces CSS output. When the decoded data is an image (PNG, JPEG, GIF, WebP), the tool wraps it in a CSS background-image: url(data:...) rule you can paste directly into your stylesheet. When the decoded data is CSS text, it returns the plain stylesheet.

How to Use Base64 to CSS

Paste a Base64 string into the input.

Click "Convert to CSS".

Copy the CSS output and paste it into your stylesheet.

Common Use Cases

Converting a Base64-encoded PNG or WebP icon into a CSS background-image rule.
Decoding a Base64-encoded CSS snippet retrieved from an API.
Generating inline CSS for image assets without a separate HTTP request.

Example Input and Output

A Base64 PNG decoded to a CSS background-image rule.

Base64 (PNG)

iVBORw0KGgo=...

CSS rule

.element {
  background-image: url("data:image/png;base64,iVBORw0KGgo=...");
  background-repeat: no-repeat;
  background-size: contain;
}

Privacy

All processing runs in your browser. No data is sent to any server.

Frequently Asked Questions

How does the tool know if the input is an image or CSS text?

It checks the magic bytes of the decoded data. PNG starts with 0x89 0x50, JPEG with 0xFF 0xD8, GIF with "GIF", WebP contains "WEBP" at byte 8. If none match, the decoded text is returned as-is.

Can I use this with SVG Base64?

SVG files do not have recognisable magic bytes as binary data. Use the SVG to Base64 tool to encode, then paste the data URI directly in your CSS.