# Interaktive Effekte mit Progressive Blur und weichen Verläufen designen - Spline Academy (https://spline.design/de/academy/tutorials/design-interactive-effects-with-progressive-blur-and-smoothing-gradients)

> In diesem Tutorial erkunden wir verschiedene Stile und Techniken, um mit weichen Verläufen und Progressive Blur sanfte, raffinierte Designs zu gestalten –…

1. [Academy](https://spline.design/de/academy)
2. [Tutorials](https://spline.design/de/academy/tutorials)
3. Interaktive Effekte mit Progressive Blur und weichen Verläufen designen

# Interaktive Effekte mit Progressive Blur und weichen Verläufen designen

HanaEinsteiger9 Min.

In diesem Tutorial erkunden wir verschiedene Stile und Techniken, um mit weichen Verläufen und Progressive Blur sanfte, raffinierte Designs zu gestalten – und wie du sie in Hana in interaktive Erlebnisse verwandelst.

Zuerst erklären wir, wie du Formen Verläufe und Blur-Effekte hinzufügst, dann bauen wir interaktive Elemente wie Hover-Animationen, Effekte, die dem Cursor folgen, Endlosanimationen und geschichtete Blur-Effekte. Alles bereit zum Einbetten in dein Webprojekt, ganz ohne Code! 👌

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

## Das lernst du

1. [0:00Intro](https://www.youtube.com/watch?v=hr5wqdVX4co&t=0s)
2. [0:15Einfaches Design mit Verläufen](https://www.youtube.com/watch?v=hr5wqdVX4co&t=15s)
3. [2:57Layer Blur hinzufügen](https://www.youtube.com/watch?v=hr5wqdVX4co&t=177s)
4. [3:41Eine Mouse-Hover-Interaktion erstellen](https://www.youtube.com/watch?v=hr5wqdVX4co&t=221s)
5. [5:28Einen interaktiven Blur-Effekt auf Text erstellen](https://www.youtube.com/watch?v=hr5wqdVX4co&t=328s)
6. [6:44Eine endlose radiale Verlaufsanimation erstellen](https://www.youtube.com/watch?v=hr5wqdVX4co&t=404s)
7. [7:43Einen Verlaufs- und Blur-Effekt erstellen, der dem Cursor folgt](https://www.youtube.com/watch?v=hr5wqdVX4co&t=463s)

## Weitere Ressourcen

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

## Überblick

- Hana
- 9 Min.
- Einsteiger

## Teil von

- [Hana | Alles, was du wissen musst](https://spline.design/de/academy/collections/hana-everything-you-need-to-know/design-interactive-effects-with-progressive-blur-and-smoothing-gradients)

## Ähnliche Tutorials

[Alle Tutorials](https://spline.design/de/academy/tutorials)

[Einen interaktiven Schalter mit Progressive Blur und Verläufen erstellenHanaEinsteiger4 Min.](https://spline.design/de/academy/tutorials/create-an-interactive-switch-with-progressive-blur-and-gradients)[Liquid-Glass-Materialien in 3D erstellenSpline 3DEinsteiger12 Min.](https://spline.design/de/academy/tutorials/create-liquid-glass-materials-in-3d)[3D-Datenvisualisierungen in Spline mit Variablen und Echtzeit-APIs erstellenSpline 3DProfi15 Min.](https://spline.design/de/academy/tutorials/how-to-create-3d-data-visualizations-in-spline-using-variables-and-real-time-apis)

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

Der 3D- und 2D-Editor für Teams und ihre Agenten. Veröffentliche im Web, auf iOS und Android.

#### Frag die KI zu Spline

#### Produkte

- [3D-Design](https://spline.design/de/3d-design)
- [Hana](https://spline.design/de/hana)
- [Omma](https://omma.build)
- [KI-3D-Generierung](https://spline.design/de/ai-generate)
- [Spline MCP](https://spline.design/de/mcp)
- [Spline Arena](https://spline.design/de/arena)
- [Preise](https://spline.design/de/pricing)
- [Enterprise](https://spline.design/de/enterprise)

#### Runtimes

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

#### Apps

- [Download](https://spline.design/de/download)
- [Spline Mirror](https://spline.design/spline-mirror)
- [Spline Mirror herunterladen](https://spline.design/download-mirror)

#### Lernen

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

#### Community

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

#### Unternehmen

- [Kunden](https://spline.design/de/customers)
- [Karriere](https://www.ycombinator.com/companies/spline/jobs)
- [Sicherheit](https://spline.design/de/security)

#### Rechtliches

- [AGB](https://spline.design/terms)
- [Datenschutz](https://spline.design/privacy)

#### Kontakt

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

© 2026 - Spline, Inc.