什麼是 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 之間轉色碼可用 色彩轉換。
輸出的是標準 CSS 嗎?
是,而且可以直接複製去驗。頁面預設值下,漸層那一格輸出 background: linear-gradient(90deg, #3388cc, #8833cc);、陰影 box-shadow: 5px 5px 15px 0px #000000;、圓角 border-radius: 20px 20px 20px 20px;。三個都是規格裡的寫法,沒有自創的簡寫、也沒有多餘的瀏覽器前綴 —— 前綴這件事現在反而是雜訊,主流瀏覽器十年前就不需要了。