設計工具工具
CSS 產生器、顏色工具和 SVG 建立
色碼換算工具
在 HEX、RGB 和 HSL 色碼之間互換。 使用顏色選擇器和即時預覽直觀選色。
色彩選擇器
使用色輪和滑桿直覺地選取顏色。 取得並複製 HEX、RGB 和 HSL 格式的色彩代碼。
圖片色彩擷取器
自動偵測圖片中的主要色彩並生成色彩調色盤。 也可以點擊圖片上的任意位置來取得個別色彩。
圖片平均色彩擷取器
計算整張圖片或選定區域的平均色彩。 適合用於選擇配色方案或縮圖背景顏色。
CSS 漸層產生器
使用拖動控制視覺化建立 CSS 漸層。 支援線性、放射狀和圓錐漸層類型及預設。
CSS 陰影產生器
使用滑桿視覺化建立 CSS box-shadow。 支援多重陰影和內陰影。
CSS 圓角產生器
使用各角落獨立控制產生 CSS border-radius。 包含橢圓半徑選項和常用形狀預設。
CSS 文字陰影產生器
以即時預覽產生 CSS text-shadow。 疊加多個陰影，包含霓虹、浮雕等預設。
CSS 三角形產生器
使用 border 屬性產生 CSS 三角形。 支援全部 8 個方向，可自訂大小和顏色。
CSS 裁切路徑產生器
透過拖放視覺化建立 CSS clip-path 形狀。 包含多邊形、圓形、橢圓形以及星形、愛心等預設。
CSS 玻璃擬態產生器
以即時預覽和 CSS 輸出建立毛玻璃 UI 效果。 精細調整透明度、模糊、邊框和陰影設定。
CSS 載入動畫產生器
從多種 CSS 載入動畫中選擇並取得代碼。 自訂旋轉器、圓點、進度條等的顏色、大小和速度。
CSS Flexbox 產生器
視覺化建立 Flexbox 版面並產生 CSS 代碼。 使用內建小抄調整所有屬性。
CSS 貝茲曲線產生器
視覺化建立 CSS 動畫緩動曲線。 拖動控制點並即時預覽動畫效果。
色彩深淺產生器
產生任何顏色從亮到暗的漸變色階。 調整步數並匯出為 Tailwind CSS 調色盤。
顏色混合工具
以指定比例混合兩種或多種顏色，創造新顏色。 比較 RGB、HSL 和 LAB 等不同色彩空間的結果。
色彩配色方案產生器
使用色彩理論從基礎色產生色彩配色方案。 包含互補色、類似色、三角配色等多種配色方案。
網頁字型預覽
即時預覽 Google Fonts 的網頁字型。 同時調整大小與顏色，比較多種字型。
HTML 色彩名稱參考表
在同一頁面瀏覽全部 148 個 HTML/CSS 命名色彩。 輕鬆搜尋、預覽並複製 HEX 色碼。
CSS 背景圖案產生器
使用純 CSS 產生背景圖案。 透過視覺化編輯器自訂條紋、圓點、格子等多種圖案。
CSS 捲軸樣式產生器
使用視覺化編輯器自訂 CSS 捲軸設計。 調整顏色、寬度、圓角，直接複製程式碼。
CSS 漸層文字產生器
產生可在文字上套用漸層的 CSS 程式碼。 即時預覽顏色、方向和範圍的調整效果。
CSS 核取方塊樣式產生器
使用視覺化編輯器建立自訂 CSS 核取方塊。 自由自訂動畫、顏色和形狀。
CSS 切換開關產生器
使用視覺化編輯器建立自訂 CSS 切換開關。 調整大小、顏色和動畫，然後匯出程式碼。
SVG 有機形狀產生器
自動產生有機不規則形狀的 SVG 圖形。 調整隨機性和複雜度，用作網頁設計裝飾元素。
SVG 圖案產生器
產生可重複拼接的 SVG 圖案。 自訂圖案類型、顏色和大小，然後匯出程式碼。