CSS SVG to CSS Converter

Home/Tools/SVG to CSS Converter

Convert SVG markup to CSS data URIs for background-image, mask, cursor, and list-style.

No sign-up neededRuns in your browserProduction-ready CSS

SVG Input

Options

Usage

Encoding

Specify size

Width (px)

Height (px)

Preview

262 bytes

Generated CSS

.element {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E %3Ccircle cx='50' cy='50' r='40' fill='%236366f1' opacity='0.8'/%3E %3Crect x='20' y='20' width='20' height='20' fill='%23ec4899'/%3E %3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 100px 100px;
}

Related Tools

CSS Variables Generator

Create and organize CSS custom properties for your design system.

Media Query Generator

Generate responsive media queries for all device sizes.

Z-Index Visualizer

Visualize and manage z-index stacking contexts.