# Mendesain Efek Interaktif dengan Progressive Blur dan Gradien Halus - Hana | Semua yang Perlu Anda Ketahui - Spline Academy (https://spline.design/id/academy/tutorials/design-interactive-effects-with-progressive-blur-and-smoothing-gradients)

> Dalam tutorial ini, kita akan menjelajahi berbagai gaya dan teknik untuk membuat desain yang lembut dan elegan dengan gradien halus dan progressive blur,…

1. [Academy](https://spline.design/id/academy)
2. [Kursus](https://spline.design/id/academy/collections)
3. [Hana | Semua yang Perlu Anda Ketahui](https://spline.design/id/academy/collections/hana-everything-you-need-to-know)
4. Mendesain Efek Interaktif dengan Progressive Blur dan Gradien Halus

# Mendesain Efek Interaktif dengan Progressive Blur dan Gradien Halus

Pelajaran 7 dari 15HanaPemula9 mnt

Dalam tutorial ini, kita akan menjelajahi berbagai gaya dan teknik untuk membuat desain yang lembut dan elegan dengan gradien halus dan progressive blur, serta cara mengubahnya menjadi pengalaman interaktif di Hana.

Kita akan mulai dengan menjelaskan cara menambahkan gradien dan efek blur pada bentuk, lalu lanjut membuat elemen interaktif seperti animasi hover, efek yang mengikuti kursor, animasi berulang, dan efek blur berlapis. Semuanya siap disematkan ke proyek web Anda, tanpa perlu coding! 👌

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

## Yang akan Anda pelajari

1. [0:00Intro](https://www.youtube.com/watch?v=hr5wqdVX4co&t=0s)
2. [0:15Desain sederhana dengan gradien](https://www.youtube.com/watch?v=hr5wqdVX4co&t=15s)
3. [2:57Menambahkan layer blur](https://www.youtube.com/watch?v=hr5wqdVX4co&t=177s)
4. [3:41Membuat interaksi mouse hover](https://www.youtube.com/watch?v=hr5wqdVX4co&t=221s)
5. [5:28Membuat efek blur interaktif pada teks](https://www.youtube.com/watch?v=hr5wqdVX4co&t=328s)
6. [6:44Membuat animasi gradien radial yang berulang](https://www.youtube.com/watch?v=hr5wqdVX4co&t=404s)
7. [7:43Membuat efek gradien dan blur yang mengikuti kursor Anda](https://www.youtube.com/watch?v=hr5wqdVX4co&t=463s)

## Sumber terkait

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

## Ikhtisar

- Hana
- 9 mnt
- Pemula

## Berikutnya

[Membuat Switch Interaktif dengan Progressive Blur dan Gradien4 mntPemula](https://spline.design/id/academy/collections/hana-everything-you-need-to-know/create-an-interactive-switch-with-progressive-blur-and-gradients)[Lanjutkan](https://spline.design/id/academy/collections/hana-everything-you-need-to-know/create-an-interactive-switch-with-progressive-blur-and-gradients)

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

Editor 3D dan 2D untuk tim dan agen mereka. Rilis ke web, iOS, dan Android.

#### Tanya AI tentang Spline

#### Produk

- [Desain 3D](https://spline.design/id/3d-design)
- [Hana](https://spline.design/id/hana)
- [Omma](https://omma.build)
- [Pembuatan 3D dengan AI](https://spline.design/id/ai-generate)
- [Spline MCP](https://spline.design/id/mcp)
- [Spline Arena](https://spline.design/id/arena)
- [Harga](https://spline.design/id/pricing)
- [Enterprise](https://spline.design/id/enterprise)

#### Runtime

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

#### Aplikasi

- [Unduh](https://spline.design/id/download)
- [Spline Mirror](https://spline.design/spline-mirror)
- [Unduh Spline Mirror](https://spline.design/download-mirror)

#### Belajar

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

#### Komunitas

- [Komunitas Spline](https://community.spline.design)
- [Blog](https://spline.design/id/blog)
- [Changelog](https://spline.design/id/changelog)
- [Pendidikan](https://spline.design/id/education)
- [Contra](https://spline.design/contra)
- [Afiliasi](https://spline.design/id/affiliate)

#### Perusahaan

- [Pelanggan](https://spline.design/id/customers)
- [Karier](https://www.ycombinator.com/companies/spline/jobs)
- [Keamanan](https://spline.design/id/security)

#### Legal

- [Syarat & Ketentuan](https://spline.design/terms)
- [Privasi](https://spline.design/privacy)

#### Kontak

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

© 2026 - Spline, Inc.