# Hana 推出漸進式模糊與漸層 - Spline blog (https://spline.design/zh-hant/blog/introducing-progressive-blur-gradients)

> 用賞心悅目的模糊與漸層，讓你的設計更上一層樓

[部落格](https://spline.design/zh-hant/blog)

2025年5月27日

# Hana 推出漸進式模糊與漸層

用賞心悅目的模糊與漸層，讓你的設計更上一層樓

[開啟 Hana](https://app.spline.design)

漸進式模糊在幾年前隨著 iOS 的玻璃 UI 美學流行起來，最近也在 UI 設計工具中越來越受歡迎。然而，它大多仍是一種複雜的技巧，很難用在動態設計或即時互動環境中。

今天，我們在 Hana 中推出即時漸進式模糊。這是第一次，這類模糊可以即時使用，控制直覺，不需要任何技術知識，而且全部在 Hana 的無限設計畫布中完成。

你可以玩玩下方的場景，看看它如何運作。

移動滑鼠或觸碰即可互動（以 Hana 打造的體驗）

## 如何在 Hana 中加入漸進式模糊

你可以選取任何圖層，加入 Layer Blur 或 Background Blur。兩者都可以選擇模糊要是均勻（Uniform）還是漸進（Progressive）。

漸進式模糊的運作方式和漸層很像，只是過渡的不是顏色，而是兩個模糊半徑值。

漸進式模糊在 Hana 中的運作方式

## Hana 的平滑漸層

現在你可以在 Hana 中建立漸層。可以選擇線性、放射狀或極座標漸層，並直接在畫布上調整位置。

我們也推出平滑漸層，它使用 Smooth Step 插值，讓顏色之間的融合更自然。大多數設計工具的漸層使用線性插值，常會在每個漸層「色標」之間產生明顯的斷點。

幾年前，我們先在 Spline 的 3D 編輯器中實作了平滑漸層，現在也把它帶到 Hana。

## SVG 匯入等更新

過去幾週，我們也為 Hana 推出了多項改進，包括支援 SVG 檔案（現在直接拖放即可）、提升效能，以及縮小執行環境的大小。

我們還加入了多項提升使用體驗的改進，包括更好的顏色選擇器行為、改進的選取工具，以及許多讓體驗更一致的小修正。

以 Hana 打造的體驗

## 立即試試看！

這裡有一個 [Spline Hana 檔案](https://app.spline.design/ui/f7cc3864-707e-492a-8148-0e1ea37be1d3)，讓你探索漸進式模糊與漸層的能力。

## 設計工作流程正在進化

這些新功能的核心雖然簡單，卻帶來前所未有的創作掌控與創作成果。

過去要製作這樣的動畫或即時互動從來都不容易，現在用 Hana 只要幾秒鐘就能完成。

我們迫不及待想看到你的作品！

—

Spline 團隊

[了解更多](https://docs.spline.design/doc/what-is-hana/doccoU2VnAOm)

## 更多部落格文章

[2026年11月3日Spline Arena 登場](https://spline.design/zh-hant/blog/introducing-spline-arena)[2026年10月21日Spline for ChatGPT 登場](https://spline.design/zh-hant/blog/introducing-spline-for-chatgpt)[2026年8月27日Hana V2 登場](https://spline.design/zh-hant/blog/hana-v2)

[Spline](https://spline.design/zh-hant)

為團隊及其 AI 代理打造的 3D 與 2D 編輯器。一鍵發布到網頁、iOS 和 Android。

#### 向 AI 詢問 Spline

#### 產品

- [3D 設計](https://spline.design/zh-hant/3d-design)
- [Hana](https://spline.design/zh-hant/hana)
- [Omma](https://omma.build)
- [AI 3D 生成](https://spline.design/zh-hant/ai-generate)
- [Spline MCP](https://spline.design/zh-hant/mcp)
- [Spline Arena](https://spline.design/zh-hant/arena)
- [價格](https://spline.design/zh-hant/pricing)
- [企業](https://spline.design/zh-hant/enterprise)

#### Runtime

- [Web](https://spline.design/zh-hant/web)
- [iOS](https://spline.design/zh-hant/ios)
- [Android](https://spline.design/zh-hant/android)

#### App

- [下載](https://spline.design/zh-hant/download)
- [Spline Mirror](https://spline.design/spline-mirror)
- [下載 Spline Mirror](https://spline.design/download-mirror)

#### 學習

- [Docs](https://docs.spline.design/)
- [Academy](https://spline.design/zh-hant/academy)
- [Spline API](https://www.npmjs.com/package/@splinetool/runtime)
- [解決方案](https://spline.design/solutions)

#### 社群

- [Spline 社群](https://community.spline.design)
- [Blog](https://spline.design/zh-hant/blog)
- [更新日誌](https://spline.design/zh-hant/changelog)
- [教育](https://spline.design/zh-hant/education)
- [Contra](https://spline.design/contra)
- [聯盟行銷](https://spline.design/zh-hant/affiliate)

#### 公司

- [客戶](https://spline.design/zh-hant/customers)
- [工作機會](https://www.ycombinator.com/companies/spline/jobs)
- [安全性](https://spline.design/zh-hant/security)

#### 法律資訊

- [條款與細則](https://spline.design/terms)
- [隱私權](https://spline.design/privacy)

#### 聯絡我們

- [help@spline.design](mailto:help@spline.design)
- [jobs@spline.design](mailto:jobs@spline.design)

© 2026 - Spline, Inc.