読み込み中...
デザイン・CSS無料登録不要
SVG→CSS変換
SVGコードをCSS background-imageのdata URI形式に変換。インラインSVGの埋め込みに便利な無料オンラインツール。
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='%233b82f6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: contain;FAQ
よくある質問
はい。SVG→CSS変換が出力するCSSは標準仕様に準拠しており、CSSファイルやstyle属性にそのままコピー＆ペーストして使用できます。
関連ツール
こちらもおすすめ
CSS角度単位
CSS角度単位を表示する無料オンラインツール。CSS角度単位をブラウザ上で即座に実行でき、デザイン・CSSとして登録不要で利用できます。
animation-direction
animation-directionを表示する無料オンラインツール。animation-directionをブラウザ上で即座に実行でき、デザイン・CSSとして登録不要で利用できます。
animation-fill-mode
animation-fill-modeを表示する無料オンラインツール。animation-fill-modeをブラウザ上で即座に実行でき、デザイン・CSSとして登録不要で利用できます。
CSSアニメーション生成
CSSアニメーションのキーフレームを視覚的に作成・プレビュー。イージング関数の選択、コードのコピーまでワンストップ。Web開発に便利な無料ツール。
border-radiusジェネレーター
CSSのborder-radiusをGUIで視覚的に調整。4隅個別・楕円形の角丸にも対応。コードをコピーしてすぐ使える無料オンラインツール。
Box Shadow生成
CSS box-shadowをGUIで直感的に作成。多重シャドウ、ニューモーフィズム、テキストシャドウにも対応。コード即コピーの無料ツール。