# Interactieve effecten ontwerpen met progressive blur en zachte gradiënten - Spline Academy (https://spline.design/nl/academy/tutorials/design-interactive-effects-with-progressive-blur-and-smoothing-gradients)

> In deze tutorial verkennen we verschillende stijlen en technieken om zachte, verfijnde designs te maken met vloeiende gradiënten en progressive blur, en hoe…

1. [Academy](https://spline.design/nl/academy)
2. [Tutorials](https://spline.design/nl/academy/tutorials)
3. Interactieve effecten ontwerpen met progressive blur en zachte gradiënten

# Interactieve effecten ontwerpen met progressive blur en zachte gradiënten

HanaBeginner9 min

In deze tutorial verkennen we verschillende stijlen en technieken om zachte, verfijnde designs te maken met vloeiende gradiënten en progressive blur, en hoe je die in Hana omzet in interactieve ervaringen.

We beginnen met uitleg over het toevoegen van gradiënten en blur-effecten aan vormen en gaan daarna verder met interactieve elementen, zoals hover-animaties, effecten die de cursor volgen, animaties in een loop en gelaagde blur-effecten. Alles is klaar om in je webproject in te sluiten, zonder code! 👌

Demoscènes: <https://app.spline.design/ui/f7cc3864-707e-492a-8148-0e1ea37be1d3>

## Wat je leert

1. [0:00Intro](https://www.youtube.com/watch?v=hr5wqdVX4co&t=0s)
2. [0:15Eenvoudig design met gradiënten](https://www.youtube.com/watch?v=hr5wqdVX4co&t=15s)
3. [2:57Layer blur toevoegen](https://www.youtube.com/watch?v=hr5wqdVX4co&t=177s)
4. [3:41Een Mouse Hover-interactie maken](https://www.youtube.com/watch?v=hr5wqdVX4co&t=221s)
5. [5:28Een interactief blur-effect op tekst maken](https://www.youtube.com/watch?v=hr5wqdVX4co&t=328s)
6. [6:44Een radiale gradiëntanimatie in een loop maken](https://www.youtube.com/watch?v=hr5wqdVX4co&t=404s)
7. [7:43Een gradiënt- en blur-effect maken dat je cursor volgt](https://www.youtube.com/watch?v=hr5wqdVX4co&t=463s)

## Gerelateerde bronnen

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

## Overzicht

- Hana
- 9 min
- Beginner

## Onderdeel van

- [Hana | Alles wat je moet weten](https://spline.design/nl/academy/collections/hana-everything-you-need-to-know/design-interactive-effects-with-progressive-blur-and-smoothing-gradients)

## Gerelateerde tutorials

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

[Maak een interactieve schakelaar met progressive blur en gradiëntenHanaBeginner4 min](https://spline.design/nl/academy/tutorials/create-an-interactive-switch-with-progressive-blur-and-gradients)[Liquid glass-materialen maken in 3DSpline 3DBeginner12 min](https://spline.design/nl/academy/tutorials/create-liquid-glass-materials-in-3d)[3D-datavisualisaties maken in Spline met variabelen en realtime API’sSpline 3DGevorderd15 min](https://spline.design/nl/academy/tutorials/how-to-create-3d-data-visualizations-in-spline-using-variables-and-real-time-apis)

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

De 3D- en 2D-editor voor teams en hun agents. Publiceer op het web, iOS en Android.

#### Vraag AI naar Spline

#### Producten

- [3D-design](https://spline.design/nl/3d-design)
- [Hana](https://spline.design/nl/hana)
- [Omma](https://omma.build)
- [3D genereren met AI](https://spline.design/nl/ai-generate)
- [Spline MCP](https://spline.design/nl/mcp)
- [Spline Arena](https://spline.design/nl/arena)
- [Prijzen](https://spline.design/nl/pricing)
- [Enterprise](https://spline.design/nl/enterprise)

#### Runtimes

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

#### Apps

- [Downloaden](https://spline.design/nl/download)
- [Spline Mirror](https://spline.design/spline-mirror)
- [Spline Mirror downloaden](https://spline.design/download-mirror)

#### Leren

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

#### Community

- [Spline Community](https://community.spline.design)
- [Blog](https://spline.design/nl/blog)
- [Changelog](https://spline.design/nl/changelog)
- [Onderwijs](https://spline.design/nl/education)
- [Contra](https://spline.design/contra)
- [Affiliates](https://spline.design/nl/affiliate)

#### Bedrijf

- [Klanten](https://spline.design/nl/customers)
- [Vacatures](https://www.ycombinator.com/companies/spline/jobs)
- [Beveiliging](https://spline.design/nl/security)

#### Juridisch

- [Algemene voorwaarden](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.