什麼是 CSS 產生器?
漸層、陰影、圓角這些 CSS 效果,用「數字硬調」很難一次到位,通常要改了看、看了再改。這個 CSS 產生器把它們變成滑桿與色票,一邊拖一邊即時預覽,滿意了再一鍵複製出乾淨的 CSS。含三個工具:漸層(linear / radial)、box-shadow 陰影、border-radius 圓角。全程在你的瀏覽器本機完成。
如何使用
- 切換上方分頁:漸層、陰影、或圓角。
- 拖動滑桿、選顏色,預覽會即時更新。
- 按「複製 CSS」把產生的程式碼貼進你的樣式表。
使用情境
- 快速做出按鈕、卡片的漸層背景與陰影。
- 調出剛好的圓角,不必反覆試數字。
- 學 CSS 時對照「數值 ↔ 視覺效果」。需要色碼轉換用 色彩轉換。
為什麼我做的陰影看起來很假?
最常見的原因是用了純黑 + 大位移 + 零模糊,結果像貼了一塊黑影。真實的陰影是「柔和、半透明、偏移不大」:試試小位移(如 2–6px)、中等模糊(10–20px)、低透明度的深色(例如 rgba(0,0,0,0.15)),看起來會自然很多。另一個容易忘的重點:box-shadow 不佔版面空間,它不像 border 會把旁邊的元素推開,所以加陰影不會改變排版。想做「發光」效果就把顏色改成亮色、位移設 0、模糊調大。做好三種效果後,要在 HEX/RGB/HSL 之間轉色碼可用 色彩轉換。