HTML 工具
轉換 HTML、Pug、JSX、SVG 元件和 CSS,減少標記與樣式的重複改寫。
本分類共 21 個工具,均在瀏覽器中執行,無需註冊。
SVG 路徑編輯器
直接編輯 SVG 路徑形狀。移動錨點與曲線控制點,再複製路徑或儲存 SVG。
SVG 最佳化工具
使用 SVGO 在本機最佳化靜態 SVG。比較結果,並下載個別檔案或 ZIP 壓縮檔。
SVG → JSX
將 SVG 檔案快速轉換為 React JSX 程式碼,簡化 React 應用的開發流程,提高開發效率
SVG → React Native
利用此工具將 SVG 檔案轉換為 React Native 元件,輕鬆構建跨平臺移動應用,提升開發體驗。
HTML → JSX
將 HTML 程式碼轉換為 React JSX 格式,便於在 React 專案中重用和元件化,提升開發效率和程式碼品質。
HTML → Pug
通過該工具將 HTML 轉換為 Pug 模板,最佳化前端開發流程,提高程式碼的可維護性和效率。
Markdown → HTML
將 Markdown 檔案轉換為 HTML,以便在網頁中展示格式化的文字內容。
Flexbox 產生器
直覺調整實際的彈性版面配置。設定容器與各個項目,嘗試不同寬度,再取得 CSS、HTML 或 Tailwind 程式碼。
CSS 裁切路徑產生器
直接在畫布上塑造形狀。拖曳多邊形頂點,探索圓形與圓角形狀,並匯出 CSS 或 SVG。
盒狀陰影產生器
逐層打造立體效果。移動光源,調整柔和度與顏色,複製可直接用於正式環境的陰影程式碼。
CSS 網格產生器
以視覺化方式繪製 CSS 網格版面。設定欄與列的尺寸,在儲存格上拖曳以命名區域,並複製 CSS、HTML 或 Tailwind 程式碼。
三次貝茲曲線產生器
拖曳兩個控制點來調整 CSS 緩動曲線。將動態效果與線性時間比較,並複製可用於轉場或 Tailwind 的 cubic-bezier()。
圓角產生器
為每個角設定圓角,切換為橢圓半徑,並拖曳邊緣控制點塑造不規則的液態形狀。複製 border-radius CSS 或 Tailwind 程式碼。
玻璃擬態產生器
使用 backdrop-filter 製作毛玻璃面板。在即時背景上調整模糊、透明度、飽和度和邊框,再複製 CSS。
CSS 漸層產生器
透過可拖曳的色標、角度轉盤與預設樣式,建立線性、放射狀與圓錐 CSS 漸層。一鍵複製 CSS 或 Tailwind class。免費,即時產生。
CSS → JS Objects
將 CSS 檔案轉換為 JavaScript 物件,便於在前端專案中使用和操作樣式。
CSS → template literal
將物件樣式轉換為模板字串,最佳化在 React 等框架中的樣式應用。
CSS → TailwindCSS
將 CSS 程式碼轉換為 TailwindCSS 類,快速構建實用主義風格的網站。
Less → CSS
將 Less 前處理器檔案轉換為標準 CSS,提高樣式表的相容性和可維護性。
Scss → CSS
將 SCSS 前處理器檔案轉換為標準 CSS,簡化樣式表的編寫和管理。
Sass → CSS
將 Sass 前處理器檔案轉換為標準 CSS,增強樣式表的可讀性和複用性。