Liquid Cheese

Free With Attribution

COPY AND PASTE

DOWNLOAD

What more backgrounds?

Unlock 200+ backgrounds

How to use

Learn where to place the CSS code: Demo

License info

As long as you don’t re-distribute or re-sell backgrounds from SVGBackgrounds.com, you may use our free backgrounds in personal or commercial projects under the following license: CC BY 4.0
(requires attribution) Full license

Attribution info

Easy ways to give credit without compromising the design:

Give credit on a credits page or screen
Give a shout out on social media
Give credit in the code as a comment

more ways

Unlock 200+ Backgrounds

» Use Unlimited Backgrounds

» In Unlimited Projects

» For 1 Designer

» No Attribution Required

Unlock Pro

view pricing

SVG to CSS converter

This tool converts SVG code into a Data URI, an encoded URL format that be used as a background-image source. In plain terms, you can place this converted SVG code directly into CSS and avoid the need for image files.

SVG Input

Insert your SVG code below:

CSS Output

Tips below if your output is not optimal.

Tips for converting SVG to CSS

When using the tool above to convert SVG code to Data URI, follow these tips for best results.

Optimize your SVG code to take out unnecessary code and keep your CSS shorter. Here is a guide on SVG Optimization.
Remove commented code before inserting your code.
Classes don't work within URL-encoded data URIs, replace classes with the direct use of SVG attributes, such as fill='#F00'
When you use an SVG as a background image in CSS, there are a few properties that will help position and size the design as desired. We comment those properties out, so you may want to play with them.