Convert SVG to background-image and CSS url

Convert your SVG files into CSS url (data URIs) by encoding it. Ready to be used in background images, list bullets, on the 'content' property of pseudo-elements, and more.

Press ⌘+D to bookmark this page

Your SVG:

Encoded SVG (CSS url):

Preview:

Become a CSS Pro

Try your design ideas in seconds with a universal CSS visual editor.

Learn more →

CSS Pro's logo

CSS 3D Buttons

The best 3D buttons and skeuomorphic buttons made with pure CSS and HTML. Click to copy.

Learn more →

CSS 3D buttons page logo

CSS Gradients

A collection of 275 beautiful CSS Gradients, click to copy.

Learn more →

CSS Gradients

toast.log

Find out your website's bugs before your customers do.

Learn more →

toast.log's logo

Have you seen CSS Scan?

The fastest and easiest way to check and copy CSS.

Learn more →

CSS Scan's logo

AI Logo Art

Transform your logos into stunning art with AI.

Learn more →

AI Logo Art's logo

Beautiful box-shadow examples

90+ free beautiful CSS box-shadow, ready to use, click to copy.

Learn more →

CSS box-shadow examples logo

Beautiful buttons examples

90+ free beautiful CSS buttons, ready to use, click to copy.

Learn more →

CSS buttons examples logo

Beautiful checkboxes examples

60+ free beautiful CSS checkboxes, ready to use, click to copy.

Learn more →

CSS checkboxes examples logo

CSS shapes examples

Triangles, bubbles, etc. 50+ free CSS shapes, click to copy.

Learn more →

CSS shapes examples logo