# Progressive Blur và gradient trong Hana - Spline blog (https://spline.design/vi/blog/introducing-progressive-blur-gradients)

> Nâng tầm thiết kế với blur và gradient đẹp mắt

[Blog](https://spline.design/vi/blog)

27 tháng 5, 2025

# Progressive Blur và gradient trong Hana

Nâng tầm thiết kế với blur và gradient đẹp mắt

[Mở Hana](https://app.spline.design)

Progressive Blur trở nên phổ biến cùng phong cách UI kính của iOS từ vài năm trước, và gần đây được ưa chuộng trong các công cụ thiết kế UI. Tuy nhiên, nó phần lớn vẫn là một kỹ thuật phức tạp, khó dùng trong thiết kế chuyển động hay môi trường tương tác thời gian thực.

Hôm nay, chúng tôi đưa Progressive Blur thời gian thực vào Hana. Lần đầu tiên, kiểu blur này có thể dùng theo thời gian thực, với các điều khiển trực quan, không cần kiến thức kỹ thuật, tất cả trong canvas thiết kế vô hạn của Hana.

Bạn có thể thử cảnh bên dưới để xem cách nó hoạt động.

Rê chuột hoặc chạm để tương tác (trải nghiệm làm bằng Hana)

## Cách thêm Progressive Blur trong Hana

Bạn có thể chọn bất kỳ layer nào và thêm Layer Blur hoặc Background Blur. Trong cả hai trường hợp, bạn có thể chọn blur là Uniform (đồng đều) hay Progressive (tăng dần).

Progressive Blur hoạt động gần giống gradient, nhưng thay vì chuyển màu, nó chuyển giữa hai giá trị bán kính blur.

Đây là cách Progressive Blur hoạt động trong Hana

## Gradient mượt trong Hana

Giờ bạn có thể tạo gradient trong Hana. Bạn có thể chọn gradient tuyến tính, tỏa tròn hoặc polar, và điều chỉnh vị trí ngay trên canvas.

Chúng tôi cũng giới thiệu Smooth Gradient, loại gradient dùng nội suy Smooth Step để chuyển màu tự nhiên hơn. Hầu hết công cụ thiết kế dùng gradient nội suy tuyến tính, thường tạo ra những điểm gãy giữa các "stop" màu của gradient.

Chúng tôi đã triển khai Smooth Gradient lần đầu trên trình chỉnh sửa 3D của Spline từ vài năm trước, và giờ mang nó đến Hana.

## Nhập SVG và hơn thế nữa

Trong vài tuần qua, chúng tôi cũng phát hành một số cải tiến cho Hana, bao gồm hỗ trợ tệp SVG (giờ bạn chỉ cần kéo thả), hiệu năng tốt hơn và kích thước runtime nhỏ hơn.

Chúng tôi cũng bổ sung nhiều cải tiến trải nghiệm, bao gồm bộ chọn màu hoạt động tốt hơn, công cụ chọn được cải thiện và nhiều bản sửa lỗi nhỏ để trải nghiệm nhất quán hơn.

Trải nghiệm làm bằng Hana

## Thử ngay!

Đây là một [tệp Spline Hana](https://app.spline.design/ui/f7cc3864-707e-492a-8148-0e1ea37be1d3) để bạn khám phá khả năng của Progressive Blur và gradient.

## Quy trình thiết kế đang thay đổi

Dù cốt lõi đơn giản, những tính năng mới này mang lại nhiều quyền kiểm soát và kết quả sáng tạo chưa từng có.

Tạo hoạt ảnh hay tương tác thời gian thực như thế này trước đây chưa bao giờ dễ dàng, và giờ bạn có thể làm điều đó chỉ trong vài giây với Hana.

Chúng tôi rất nóng lòng được xem bạn tạo ra gì!

—

Đội ngũ Spline

[Tìm hiểu thêm](https://docs.spline.design/doc/what-is-hana/doccoU2VnAOm)

## Thêm từ blog

[3 tháng 11, 2026Giới thiệu Spline Arena](https://spline.design/vi/blog/introducing-spline-arena)[21 tháng 10, 2026Giới thiệu Spline cho ChatGPT](https://spline.design/vi/blog/introducing-spline-for-chatgpt)[27 tháng 8, 2026Giới thiệu Hana V2](https://spline.design/vi/blog/hana-v2)

[Spline](https://spline.design/vi)

Trình chỉnh sửa 3D và 2D cho các nhóm và tác nhân AI của họ. Xuất bản lên web, iOS và Android.

#### Hỏi AI về Spline

#### Sản phẩm

- [Thiết kế 3D](https://spline.design/vi/3d-design)
- [Hana](https://spline.design/vi/hana)
- [Omma](https://omma.build)
- [Tạo 3D bằng AI](https://spline.design/vi/ai-generate)
- [Spline MCP](https://spline.design/vi/mcp)
- [Spline Arena](https://spline.design/vi/arena)
- [Bảng giá](https://spline.design/vi/pricing)
- [Doanh nghiệp](https://spline.design/vi/enterprise)

#### Runtime

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

#### Ứng dụng

- [Tải xuống](https://spline.design/vi/download)
- [Spline Mirror](https://spline.design/spline-mirror)
- [Tải Spline Mirror](https://spline.design/download-mirror)

#### Học

- [Docs](https://docs.spline.design/)
- [Academy](https://spline.design/vi/academy)
- [Spline API](https://www.npmjs.com/package/@splinetool/runtime)
- [Giải pháp](https://spline.design/solutions)

#### Cộng đồng

- [Cộng đồng Spline](https://community.spline.design)
- [Blog](https://spline.design/vi/blog)
- [Changelog](https://spline.design/vi/changelog)
- [Giáo dục](https://spline.design/vi/education)
- [Contra](https://spline.design/contra)
- [Tiếp thị liên kết](https://spline.design/vi/affiliate)

#### Công ty

- [Khách hàng](https://spline.design/vi/customers)
- [Tuyển dụng](https://www.ycombinator.com/companies/spline/jobs)
- [Bảo mật](https://spline.design/vi/security)

#### Pháp lý

- [Điều khoản & Điều kiện](https://spline.design/terms)
- [Quyền riêng tư](https://spline.design/privacy)

#### Liên hệ

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

© 2026 - Spline, Inc.
