CSS 元素樣式工作台
選一個按鈕、卡片、徽章或頭像模板，在這個真實元素上同時調背景漸層、邊框、圓角與多層陰影，即時預覽並一次複製完整的 CSS 規則。
元素樣式工作台怎麼用
一個真實元素，四個屬性疊在一起
單屬性產生器只給你一個色塊。這裡的預覽是帶真實文字的按鈕、卡片、徽章或頭像，1px 邊框、12px 圓角與兩層陰影會一起被看見，就像它們在你的介面上的樣子。關閉任一面板可以把該屬性從輸出移除，設定不會消失。
輸出是一組 ruleset
CSS 面板依 background、border、border-radius、box-shadow 的順序印在同一個 selector 裡。陰影每層一行；透明度低於 100% 的顏色會寫成 rgba()，貼上就能用。把 .element 換成你元件的 selector 即可。
常見問題
關於這個主題的常見疑問與實用解答。
原本的漸層、陰影、圓角產生器去哪了？
它們就是這個工作台的四個面板。舊網址仍然可用，會直接開啟對應面板展開的工作台；以前能產生的東西一個都沒少。
陰影顏色為什麼是十六進位色碼加一個透明度滑桿？
設計上通常把陰影想成「某個基色乘上某個強度」。把兩者分開，你可以在多層之間沿用同一個色碼、只改透明度；輸出時會自動合成 rgba()。
會把資料傳到伺服器嗎？
不會。預覽與 CSS 都在你的瀏覽器計算；沒有帳號、不上傳、也不保存歷史。