創意圓角產生器
免費線上創意圓角產生器。拖曳 8 個控制點或選擇 blob 預設，快速建立有機 CSS 形狀並複製 border-radius 程式碼。
border-radius 的 8 值語法是什麼意思？
在語法 border-radius: h1 h2 h3 h4 / v1 v2 v3 v4 中，斜線前是四個角的水平半徑（左上、右上、右下、左下），斜線後是垂直半徑。兩個方向取不同的數值，就能形成有機的 blob 形狀。
如何使用產生的 CSS？
複製這行 border-radius 程式碼，貼到目標元素的任意 CSS 規則中，例如 .card { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }。一般 CSS、Sass、Tailwind 任意值或行內樣式都可以使用。
Blob 形狀常用在哪些地方？
Blob 形狀常見於首屏插圖、頭像、個人資料圖、功能卡片、按鈕以及現代網頁和應用中的裝飾性背景。
圓角在所有瀏覽器中都有效嗎？
是的。border-radius 在所有現代瀏覽器（包括 Chrome、Firefox、Safari、Edge 和行動端瀏覽器）中都得到完整支援，不需要任何瀏覽器前綴。
可以為 blob 形狀加上動畫嗎？
可以。border-radius 是可動畫屬性，加上 CSS transition 就能在不同形狀之間平滑變形，例如 .blob { transition: border-radius .8s ease; }。
4 值語法和 8 值語法有什麼區別？
4 值語法把每個角的水平和垂直半徑設為同一個值，足以實現膠囊或圓形；8 值語法把水平和垂直半徑分開設定，這正是實現不對稱有機形狀的關鍵。
如何得到正圓形？
在正方形元素上把 8 個值都設為 50%，或直接使用 border-radius: 50%。也可以先選擇一個接近圓形的預設，再在此基礎上微調。
我的資料會被上傳嗎？
不會。產生器完全在瀏覽器中以純 CSS 和 JavaScript 執行，你拖曳、輸入或複製的內容都不會傳送到任何伺服器。
可以用在非正方形元素上嗎？
可以，但百分比半徑是相對於元素自身尺寸計算的，矩形會產生橢圓形的圓角，效果與正方形預覽不同。建議把產生的數值作為起點再進行調整。
如何使用創意圓角產生器
八值 border-radius 能產生一般圓角矩形比不上的有機 blob 形狀。用可拖曳的控制點雕出造型，再一鍵複製現成的 CSS——所有渲染都在瀏覽器中即時完成。
- 拖動形狀邊緣上的八個控制點即可造型——上下邊緣的控制點控制水平圓角，左右兩側的控制點控制垂直圓角。
- 點擊六個預設形狀小方塊，從一個設計好的形狀出發，再用水平圓角和垂直圓角兩組數字輸入框微調（每個角一個值，範圍 0–100%）。
- 點擊隨機按鈕一鍵產生新的有機形狀；重設按鈕則還原預設形狀和配色。
- 透過形狀顏色和背景顏色選擇器，讓預覽貼近你的目標配色，改動即時生效。
- 點擊複製 CSS，把底部列中即時顯示的 border-radius 宣告複製走，貼到任何元素上即可。
把這段 CSS 用在正方形元素上並搭配 overflow: hidden，就能得到經典的 blob 效果；百分比讓曲線在任何尺寸下都保持流暢，語法中斜線前是水平半徑、斜線後是垂直半徑。
相關工具
- CSS圓角產生器 視覺化CSS圓角產生器，獨立調整每個角的圓角半徑，即時預覽並立即複製產生的CSS程式碼。
- CSS 漸層產生器 視覺化建立精美 CSS 漸層。產生支援多色標、自訂角度和位置的線性、徑向和錐形漸層。即時複製可投入生產的 CSS 程式碼。
- CSS 陰影產生器 免費線上 CSS box-shadow 產生器。視覺化建立精美陰影，可調整偏移、模糊、擴展、顏色和內陰影。即時預覽，即時複製程式碼。
- 配色方案產生器 使用免費線上產生器即時建立美麗和諧的配色方案。支援單色、類似色、互補色、三色、分裂互補和四色模式。透過HSL滑桿微調顏色，鎖定喜歡的顏色，匯出為CSS變數、Tailwind設定、JSON或SVG格式。100%瀏覽器運行，資料永不離開您的裝置。
- 顏色轉換器 免費線上顏色轉換器。即時轉換 HEX、RGB、HSL、HSV 格式，附視覺化拾色器。100% 隱私保護，瀏覽器本地運行。
- CSS 緩動函數產生器 免費線上 CSS 緩動產生器。在互動曲線上拖曳 cubic-bezier 控制點，內建 18 種預設，小球循環動畫即時對比，一鍵複製 timing function。
- CSS 文字陰影產生器 免費線上 CSS text-shadow 產生器。多層陰影可調偏移、模糊、顏色與透明度，內建霓虹、3D、復古、光暈等預設，即時預覽並一鍵複製程式碼。
- CSS clip-path 裁剪產生器 免費線上 CSS clip-path 產生器。支援 polygon、circle、ellipse、inset 四種模式，頂點可拖曳，即時預覽並一鍵複製 CSS 程式碼。