# Magdisenyo ng mga Interactive Effect gamit ang Progressive Blur at Smoothing Gradients - Spline Academy (https://spline.design/fil/academy/tutorials/design-interactive-effects-with-progressive-blur-and-smoothing-gradients)

> Sa tutorial na ito, tutuklasin namin ang iba't ibang style at technique sa paggawa ng malambot at sopistikadong mga design gamit ang mga smooth gradient at…

1. [Academy](https://spline.design/fil/academy)
2. [Mga Tutorial](https://spline.design/fil/academy/tutorials)
3. Magdisenyo ng mga Interactive Effect gamit ang Progressive Blur at Smoothing Gradients

# Magdisenyo ng mga Interactive Effect gamit ang Progressive Blur at Smoothing Gradients

HanaBaguhan9 min

Sa tutorial na ito, tutuklasin namin ang iba't ibang style at technique sa paggawa ng malambot at sopistikadong mga design gamit ang mga smooth gradient at progressive blur, at kung paano gawing interactive experience ang mga ito sa Hana.

Sisimulan namin sa pagpapaliwanag kung paano magdagdag ng mga gradient at blur effect sa mga hugis, tapos lilipat kami sa paggawa ng mga interactive na elemento gaya ng mga hover animation, mga effect na sumusunod sa cursor, mga looping animation at mga layered blur effect. Handa nang i-embed ang lahat ng ito sa web project mo, walang coding na kailangan! 👌

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

## Ang matututunan mo

1. [0:00Intro](https://www.youtube.com/watch?v=hr5wqdVX4co&t=0s)
2. [0:15Simpleng design gamit ang mga gradient](https://www.youtube.com/watch?v=hr5wqdVX4co&t=15s)
3. [2:57Pagdaragdag ng layer blur](https://www.youtube.com/watch?v=hr5wqdVX4co&t=177s)
4. [3:41Paggawa ng mouse hover interaction](https://www.youtube.com/watch?v=hr5wqdVX4co&t=221s)
5. [5:28Paggawa ng interactive na blur effect sa text](https://www.youtube.com/watch?v=hr5wqdVX4co&t=328s)
6. [6:44Paggawa ng looping na radial gradient animation](https://www.youtube.com/watch?v=hr5wqdVX4co&t=404s)
7. [7:43Paggawa ng gradient at blur effect na sumusunod sa cursor mo](https://www.youtube.com/watch?v=hr5wqdVX4co&t=463s)

## Mga kaugnay na resource

- [Circular BlurTemplate](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 HanaDokumento](https://docs.spline.design/hana-a-canvas-for-interactivity/effects-in-hana)
- [Interactivity in HanaDokumento](https://docs.spline.design/hana-a-canvas-for-interactivity/interactivity-in-hana)

## Overview

- Hana
- 9 min
- Baguhan

## Bahagi ng

- [Hana | Lahat ng Kailangan Mong Malaman](https://spline.design/fil/academy/collections/hana-everything-you-need-to-know/design-interactive-effects-with-progressive-blur-and-smoothing-gradients)

## Mga kaugnay na tutorial

[Lahat ng tutorial](https://spline.design/fil/academy/tutorials)

[Gumawa ng Interactive na Switch gamit ang Progressive Blur at mga GradientHanaBaguhan4 min](https://spline.design/fil/academy/tutorials/create-an-interactive-switch-with-progressive-blur-and-gradients)[Gumawa ng mga Liquid Glass Material sa 3DSpline 3DBaguhan12 min](https://spline.design/fil/academy/tutorials/create-liquid-glass-materials-in-3d)[Paano Gumawa ng mga 3D Data Visualization sa Spline gamit ang mga Variable at Real-Time APISpline 3DAdvanced15 min](https://spline.design/fil/academy/tutorials/how-to-create-3d-data-visualizations-in-spline-using-variables-and-real-time-apis)

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

Ang 3D at 2D editor para sa mga team at kanilang mga agent. I-publish sa web, iOS at Android.

#### Magtanong sa AI tungkol sa Spline

#### Mga Produkto

- [3D Design](https://spline.design/fil/3d-design)
- [Hana](https://spline.design/fil/hana)
- [Omma](https://omma.build)
- [AI 3D Generation](https://spline.design/fil/ai-generate)
- [Spline MCP](https://spline.design/fil/mcp)
- [Spline Arena](https://spline.design/fil/arena)
- [Presyo](https://spline.design/fil/pricing)
- [Enterprise](https://spline.design/fil/enterprise)

#### Runtimes

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

#### Apps

- [I-download](https://spline.design/fil/download)
- [Spline Mirror](https://spline.design/spline-mirror)
- [I-download ang Spline Mirror](https://spline.design/download-mirror)

#### Matuto

- [Docs](https://docs.spline.design/)
- [Academy](https://spline.design/fil/academy)
- [Spline API](https://www.npmjs.com/package/@splinetool/runtime)
- [Mga Solusyon](https://spline.design/solutions)

#### Community

- [Spline Community](https://community.spline.design)
- [Blog](https://spline.design/fil/blog)
- [Changelog](https://spline.design/fil/changelog)
- [Edukasyon](https://spline.design/fil/education)
- [Contra](https://spline.design/contra)
- [Affiliate](https://spline.design/fil/affiliate)

#### Kumpanya

- [Mga Customer](https://spline.design/fil/customers)
- [Careers](https://www.ycombinator.com/companies/spline/jobs)
- [Security](https://spline.design/fil/security)

#### Legal

- [Mga Tuntunin at Kundisyon](https://spline.design/terms)
- [Privacy](https://spline.design/privacy)

#### Contact

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

© 2026 - Spline, Inc.