跳到主要內容

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,增強樣式表的可讀性和複用性。