CSS Box Shadow 產生器
以視覺化方式建立 CSS box-shadow 值。即時預覽並複製產生的 CSS。
box-shadow: 0px 8px 16px 0px #00000033;
什麼是 CSS Box Shadow 產生器？
CSS 的 box-shadow 屬性接受水平偏移、垂直偏移、模糊半徑、擴展半徑和顏色。可以疊加多個陰影來實現分層效果。這款視覺化產生器能為任意組合產生 CSS：適用於按鈕、卡片和景深效果。
常見問題
如何疊加多個陰影？▼
在 box-shadow 的值中用逗號分隔它們。疊加它們能創造出比單個陰影更逼真的景深。
模糊和擴展有什麼差別？▼
模糊（blur）會柔化陰影的邊緣；擴展（spread）則在模糊之前放大或縮小陰影的尺寸。
相關工具
顏色轉換工具（HEX/RGB/HSL）
在HEX、RGB和HSL格式之間轉換顏色。可視化選取顏色，或手動輸入數值。
CSS漸層產生器
建立線性和放射狀CSS漸層。以視覺化方式選擇顏色，並複製產生的CSS。
Cubic Bezier緩動曲線產生器
為CSS建立cubic-bezier緩動曲線。內建標準預設。
配色方案產生器
從任意基準色產生和諧的配色方案。支援互補色、鄰近色、三角色和單色方案。
CSS Border Radius 產生器
以視覺化方式建立複雜的 CSS border-radius 值。可獨立控制每個圓角。
CSS Clamp()產生器
使用clamp()產生流式、響應式的CSS數值。在視口範圍內於最小值與最大值之間平滑縮放。