CSS Data URI Converter

code
Loading feedback…

Wrap raw Base64 in a CSS data URI or extract Base64 from an existing CSS url(data:...) declaration.

Last updated: May 16, 2026Author: Mateo DíazReviewed by: Riley Williams
CSS Data URI Converter
In-browser
Convert between raw Base64 and CSS url(data:...) snippets
Characters: 0Words: 0Sentences: 0Lines: 0

Options

Characters: 0Words: 0Sentences: 0Lines: 0

What is a CSS data URI converter?

A CSS data URI converter wraps raw Base64 in a url("data:...;base64,...") snippet or extracts raw Base64 from an existing CSS data URI. It is useful for small images and test fixtures.

How to use it

  1. Choose Base64 to CSS url or CSS url to Base64.
  2. Paste the raw Base64 or CSS snippet.
  3. Set the MIME type when creating a new data URI.

Example

Input: iVBORw0KGgoAAAANSUhEUgAA...

Output: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...")

Common mistakes

  • CSS data URIs can make stylesheets large.
  • Use data URIs for small icons, not large photos.
  • Raw Base64 needs the correct MIME type to render correctly.

Related tools

Privacy and security

The conversion is text-only and runs locally in your browser.