# Thiết kế hiệu ứng tương tác với progressive blur và gradient mượt - Hana | Mọi điều bạn cần biết - Spline Academy (https://spline.design/vi/academy/tutorials/design-interactive-effects-with-progressive-blur-and-smoothing-gradients)

> Trong hướng dẫn này, chúng ta sẽ khám phá nhiều phong cách và kỹ thuật để tạo ra những thiết kế mềm mại, tinh tế bằng gradient mượt và progressive blur,…

1. [Academy](https://spline.design/vi/academy)
2. [Khóa học](https://spline.design/vi/academy/collections)
3. [Hana | Mọi điều bạn cần biết](https://spline.design/vi/academy/collections/hana-everything-you-need-to-know)
4. Thiết kế hiệu ứng tương tác với progressive blur và gradient mượt

# Thiết kế hiệu ứng tương tác với progressive blur và gradient mượt

Bài 7 / 15HanaCơ bản9 phút

Trong hướng dẫn này, chúng ta sẽ khám phá nhiều phong cách và kỹ thuật để tạo ra những thiết kế mềm mại, tinh tế bằng gradient mượt và progressive blur, cũng như cách biến chúng thành trải nghiệm tương tác trong Hana.

Chúng ta sẽ bắt đầu bằng cách giải thích cách thêm gradient và hiệu ứng blur cho hình khối, rồi chuyển sang tạo các thành phần tương tác như hoạt ảnh hover, hiệu ứng đi theo con trỏ, hoạt ảnh lặp và hiệu ứng blur nhiều lớp. Tất cả đều sẵn sàng để nhúng vào dự án web của bạn, không cần viết mã! 👌

Cảnh demo: <https://app.spline.design/ui/f7cc3864-707e-492a-8148-0e1ea37be1d3>

## Bạn sẽ học được gì

1. [0:00Giới thiệu](https://www.youtube.com/watch?v=hr5wqdVX4co&t=0s)
2. [0:15Thiết kế đơn giản với gradient](https://www.youtube.com/watch?v=hr5wqdVX4co&t=15s)
3. [2:57Thêm layer blur](https://www.youtube.com/watch?v=hr5wqdVX4co&t=177s)
4. [3:41Tạo tương tác mouse hover](https://www.youtube.com/watch?v=hr5wqdVX4co&t=221s)
5. [5:28Tạo hiệu ứng blur tương tác trên chữ](https://www.youtube.com/watch?v=hr5wqdVX4co&t=328s)
6. [6:44Tạo hoạt ảnh gradient tỏa tròn lặp lại](https://www.youtube.com/watch?v=hr5wqdVX4co&t=404s)
7. [7:43Tạo hiệu ứng gradient và blur đi theo con trỏ](https://www.youtube.com/watch?v=hr5wqdVX4co&t=463s)

## Tài nguyên liên quan

- [Circular BlurMẫu](https://app.spline.design/academy/tutorials/design-interactive-effects-with-progressive-blur-and-smoothing-gradients?redirect-duplicate-template-uuid=fa1a715c-86bd-40db-b012-f8c407b7e998&is-2d-file=true)
- [Effects in HanaTài liệu](https://docs.spline.design/hana-a-canvas-for-interactivity/effects-in-hana)
- [Interactivity in HanaTài liệu](https://docs.spline.design/hana-a-canvas-for-interactivity/interactivity-in-hana)

## Tổng quan

- Hana
- 9 phút
- Cơ bản

## Tiếp theo

[Tạo công tắc tương tác với progressive blur và gradient4 phútCơ bản](https://spline.design/vi/academy/collections/hana-everything-you-need-to-know/create-an-interactive-switch-with-progressive-blur-and-gradients)[Tiếp tục](https://spline.design/vi/academy/collections/hana-everything-you-need-to-know/create-an-interactive-switch-with-progressive-blur-and-gradients)

[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.