# Progressive blur ve yumuşak gradyanlarla etkileşimli efektler tasarla - Hana | Bilmen gereken her şey - Spline Academy (https://spline.design/tr/academy/tutorials/design-interactive-effects-with-progressive-blur-and-smoothing-gradients)

> Bu eğitimde yumuşak gradyanlar ve progressive blur ile zarif, sofistike tasarımlar oluşturmanın çeşitli stil ve tekniklerini keşfedecek ve bunları Hana’da…

1. [Academy](https://spline.design/tr/academy)
2. [Kurslar](https://spline.design/tr/academy/collections)
3. [Hana | Bilmen gereken her şey](https://spline.design/tr/academy/collections/hana-everything-you-need-to-know)
4. Progressive blur ve yumuşak gradyanlarla etkileşimli efektler tasarla

# Progressive blur ve yumuşak gradyanlarla etkileşimli efektler tasarla

Ders 7 / 15HanaBaşlangıç9 dk

Bu eğitimde yumuşak gradyanlar ve progressive blur ile zarif, sofistike tasarımlar oluşturmanın çeşitli stil ve tekniklerini keşfedecek ve bunları Hana’da etkileşimli deneyimlere nasıl dönüştüreceğini göreceğiz.

Önce şekillere gradyan ve bulanıklık efektlerinin nasıl ekleneceğini anlatacak, ardından hover animasyonları, imleci takip eden efektler, döngülü animasyonlar ve katmanlı bulanıklık efektleri gibi etkileşimli öğeler oluşturmaya geçeceğiz. Bunların hepsi web projene gömülmeye hazır, kod gerekmez! 👌

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

## Neler öğreneceksin

1. [0:00Giriş](https://www.youtube.com/watch?v=hr5wqdVX4co&t=0s)
2. [0:15Gradyanlarla sade tasarım](https://www.youtube.com/watch?v=hr5wqdVX4co&t=15s)
3. [2:57Layer blur eklemek](https://www.youtube.com/watch?v=hr5wqdVX4co&t=177s)
4. [3:41Mouse hover etkileşimi oluşturmak](https://www.youtube.com/watch?v=hr5wqdVX4co&t=221s)
5. [5:28Metin üzerinde etkileşimli bir bulanıklık efekti oluşturmak](https://www.youtube.com/watch?v=hr5wqdVX4co&t=328s)
6. [6:44Döngülü bir radyal gradyan animasyonu oluşturmak](https://www.youtube.com/watch?v=hr5wqdVX4co&t=404s)
7. [7:43İmlecini takip eden bir gradyan ve bulanıklık efekti oluşturmak](https://www.youtube.com/watch?v=hr5wqdVX4co&t=463s)

## İlgili kaynaklar

- [Circular BlurŞablon](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 HanaDoküman](https://docs.spline.design/hana-a-canvas-for-interactivity/effects-in-hana)
- [Interactivity in HanaDoküman](https://docs.spline.design/hana-a-canvas-for-interactivity/interactivity-in-hana)

## Genel bakış

- Hana
- 9 dk
- Başlangıç

## Sıradaki

[Progressive blur ve gradyanlarla etkileşimli bir anahtar oluştur4 dkBaşlangıç](https://spline.design/tr/academy/collections/hana-everything-you-need-to-know/create-an-interactive-switch-with-progressive-blur-and-gradients)[Devam et](https://spline.design/tr/academy/collections/hana-everything-you-need-to-know/create-an-interactive-switch-with-progressive-blur-and-gradients)

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

Ekipler ve ajanları için 3D ve 2D editör. Web’de, iOS’ta ve Android’de yayınla.

#### Spline’ı yapay zekaya sor

#### Ürünler

- [3D Tasarım](https://spline.design/tr/3d-design)
- [Hana](https://spline.design/tr/hana)
- [Omma](https://omma.build)
- [Yapay Zekayla 3D Üretim](https://spline.design/tr/ai-generate)
- [Spline MCP](https://spline.design/tr/mcp)
- [Spline Arena](https://spline.design/tr/arena)
- [Fiyatlandırma](https://spline.design/tr/pricing)
- [Kurumsal](https://spline.design/tr/enterprise)

#### Runtime’lar

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

#### Uygulamalar

- [İndir](https://spline.design/tr/download)
- [Spline Mirror](https://spline.design/spline-mirror)
- [Spline Mirror’ı indir](https://spline.design/download-mirror)

#### Öğren

- [Docs](https://docs.spline.design/)
- [Academy](https://spline.design/tr/academy)
- [Spline API](https://www.npmjs.com/package/@splinetool/runtime)
- [Çözümler](https://spline.design/solutions)

#### Topluluk

- [Spline Topluluğu](https://community.spline.design)
- [Blog](https://spline.design/tr/blog)
- [Sürüm Notları](https://spline.design/tr/changelog)
- [Eğitim](https://spline.design/tr/education)
- [Contra](https://spline.design/contra)
- [Ortaklık](https://spline.design/tr/affiliate)

#### Şirket

- [Müşteriler](https://spline.design/tr/customers)
- [Kariyer](https://www.ycombinator.com/companies/spline/jobs)
- [Güvenlik](https://spline.design/tr/security)

#### Yasal

- [Şartlar ve Koşullar](https://spline.design/terms)
- [Gizlilik](https://spline.design/privacy)

#### İletişim

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

© 2026 - Spline, Inc.