CSS 漸層與陰影產生器 使用方法
- 1
選擇漸層或方塊陰影
使用預覽上方的分頁，在兩個編輯器之間切換。
- 2
從預設範本開始
點選預設範本載入，或保留預設值，再從那裡開始調整。
- 3
視覺化調整
拖曳色標並設定角度，或新增陰影圖層，再調整位移、模糊與擴散。
- 4
複製程式碼
複製 CSS 宣告或 Tailwind 類別，貼到你的專案中。
限制與 Pro
免費，不需註冊：色標與陰影圖層數量不限，提供 3 種漸層類型、3 種色彩混合空間與 24 組預設範本。
Pro 會移除廣告；兩個編輯器的功能在每個方案中都完整提供。 查看 Pro
關於 CSS 漸層與陰影產生器
漸層與陰影是 CSS 中最常需要在瀏覽器開發者工具裡反覆試誤調整的兩種效果。這個產生器為兩者各提供一個視覺化編輯器和大尺寸即時預覽，並寫出完整的 CSS 宣告，以及對應的 Tailwind 任意值類別，例如 bg-[linear-gradient(135deg,#ff7e5f_0%,#feb47b_100%)]，可以直接貼到樣式表或 className 中。
漸層編輯器可建立線性、放射狀與錐形漸層。點一下色標列，就能在點擊處新增顏色；拖曳色標可移動位置，也能用方向鍵精確調整，每個色標都有自己的不透明度。線性與錐形漸層可設定角度，放射狀與錐形漸層可設定中心點，放射狀漸層還能選擇圓形或橢圓形，每一種都能開啟重複，做出條紋與圓環。你也可以選擇色彩混合所用的色彩空間：OKLab 與 OKLCH 能避免傳統 sRGB 在鮮豔色彩之間混出灰濛濛的中段，目前所有主流瀏覽器都支援。
方塊陰影編輯器可疊加任意數量的圖層。每個圖層都有 X、Y 位移、模糊、擴散、含不透明度的顏色、內陰影開關和顯示切換，圖層順序也能調整，因為第一層會畫在最上面。預覽方塊可調整大小、圓角與顏色，並在淺色或深色表面上顯示效果。
每個編輯器各有 12 組預設範本，包括日落、色環、條紋，以及 Material 高度、多層柔和陰影、新擬物風格與硬邊位移，讓你有個起點。本工具只處理漸層與方塊陰影，不會產生 text-shadow、filter: drop-shadow 與 SVG 漸層。
隱私
所有處理都在頁面內完成：顏色與設定不會離開你的瀏覽器，也不會上傳任何圖片。你目前的漸層與陰影會儲存在本機儲存空間，下次回來時仍然會在。
功能
線性、放射狀與錐形
可拖曳的色標，支援不透明度、角度、中心、形狀與重複模式。
多層陰影
可疊加、排序、隱藏陰影圖層，也能設為內陰影，呈現真實的立體感。
CSS 與 Tailwind
複製現成的宣告，或 Tailwind 任意值類別。