擬物化產生器

以雙重陰影設計柔和、立體的擬物化 UI 表面，並複製 CSS。

預覽

CSS

—

畫布背景會與元素顏色一致 — 這正是營造柔和、立體的擬物化外觀的關鍵。

基底顏色

同時用於元素及其背景。

形狀

光源

尺寸 200px

邊角半徑 50px

距離 20px

強度 15%

模糊 60px

手動設定陰影顏色

預設情況下，亮部與暗部陰影會由基底顏色推算。啟用後可自行設定。

關於擬物化產生器

新擬態產生器打造柔和的擠壓式「柔和 UI」外觀：讓元素看起來像是從背後表面凸出或凹入。選取一個基礎色，工具會推導出其餘一切，因為這種效果只有在元素與背景共用同一色彩、深度完全來自兩道相反方向的 box-shadow 時才會成立。

滑桿控制幾何形狀：尺寸、圓角、陰影距離、強度與模糊程度。四種形狀模式——扁平、凹陷、凸起與按壓——會切換內部漸層與陰影方向，光源選取器可將高光移到四個角落中的任一個，以符合你設計的光照方向。

預設情況下，明暗陰影色彩是由基礎色計算而來，但手動模式讓你自行設定兩者。產生的 CSS——background、圓角與雙重 box-shadow——只需一鍵即可取得。

新擬態效果依賴元素與背後表面共用同一背景色。請將元素放在具有相同基礎色的容器上——若放在白色或對比強烈的背景上，雙重陰影只會看起來像光暈而非深度。

扁平保持表面平整；凸起加上讓其向外鼓起的漸層；凹陷讓其向內凹陷；按壓則完全反轉陰影方向，使元素看起來陷入表面——這是經典的啟用中按鈕狀態。

在相對的兩個角落各放一道 box-shadow：一道模擬陰影的深色，一道模擬高光的淺色，兩者都由基礎色推導而來。距離讓它們產生偏移，模糊讓其柔化，強度則控制其偏離基礎色的程度。

請謹慎使用。這種風格本質上對比度較低，因此請搭配清晰可讀的文字、明顯的焦點狀態，以及互動元素足夠的對比比例——盡量將柔和外觀保留給裝飾性表面使用。

是的，它免費且完全在你的瀏覽器中運作。你可以隨意調整、預覽並複製 CSS，無需帳號。