SVG Blob 產生器

相似CSS 與設計

將程式碼轉成美觀的分享圖片，支援多種主題

視覺化設計線性、放射、圓錐漸層，即時複製 CSS 程式碼

即時預覽玻璃擬態效果，一鍵複製 CSS 程式碼

?

還沒有留言，搶先留下你的想法！

隨機生成有機曲線的 SVG blob 形狀，可調整複雜度、隨機性與填色，適合做背景裝飾或插畫元素，並可複製 SVG 或 clip-path。

「複雜度」滑桿控制 Blob 的頂點數量（3～10），數值愈高形狀細節愈豐富；「隨機性」控制頂點偏離圓形的幅度，設為 0 接近正圓，100 則形狀最不規則。
點擊 6 個顏色圓圈選擇漸層填色（紫色、玫瑰、青色、琥珀、粉紅）或純色；顏色即時反映在右側預覽。
選擇 5 種 CSS 動畫之一（無、脈衝、漂浮、搖晃、旋轉），匯出的 SVG 檔案內會自動嵌入對應的 @keyframes 動畫代碼。
點「隨機產生」快速跳到新形狀；找到喜歡的後再微調「複雜度」與「隨機性」細修形狀。
底部匯出列有四個選項：「複製 SVG」取得完整標記、「複製 clip-path」取得 CSS path() 用於遮罩裁剪、「SVG」下載向量檔、「PNG」下載 800×800 點陣圖。

SVG Blob 產生器是什麼？

隨機生成有機圓滑形狀的 SVG 圖形，可自訂顏色、複雜度與隨機程度，常用於背景裝飾。

生成的 SVG 可以用在哪裡？

可嵌入 HTML/CSS，或下載後在 Figma、Illustrator 等設計工具中使用。

每次點擊會生成不同形狀嗎？

是，每次點擊「重新生成」都產生全新隨機形狀。