# Concevoir des effets interactifs avec flou progressif et dégradés doux - Hana | Tout ce qu’il faut savoir - Spline Academy (https://spline.design/fr/academy/tutorials/design-interactive-effects-with-progressive-blur-and-smoothing-gradients)

> Dans ce tutoriel, nous explorons différents styles et techniques pour créer des designs doux et sophistiqués avec des dégradés fluides et un flou…

1. [Academy](https://spline.design/fr/academy)
2. [Cours](https://spline.design/fr/academy/collections)
3. [Hana | Tout ce qu’il faut savoir](https://spline.design/fr/academy/collections/hana-everything-you-need-to-know)
4. Concevoir des effets interactifs avec flou progressif et dégradés doux

# Concevoir des effets interactifs avec flou progressif et dégradés doux

Leçon 7 sur 15HanaDébutant9 min

Dans ce tutoriel, nous explorons différents styles et techniques pour créer des designs doux et sophistiqués avec des dégradés fluides et un flou progressif, et nous voyons comment les transformer en expériences interactives dans Hana.

Nous commençons par expliquer comment ajouter des dégradés et des effets de flou aux formes, puis nous passons à la création d’éléments interactifs : animations au survol, effets qui suivent le curseur, animations en boucle et effets de flou superposés. Le tout prêt à être intégré à votre projet web, sans coder ! 👌

Scènes de démo : <https://app.spline.design/ui/f7cc3864-707e-492a-8148-0e1ea37be1d3>

## Ce que vous allez apprendre

1. [0:00Intro](https://www.youtube.com/watch?v=hr5wqdVX4co&t=0s)
2. [0:15Design simple avec des dégradés](https://www.youtube.com/watch?v=hr5wqdVX4co&t=15s)
3. [2:57Ajouter un flou de calque](https://www.youtube.com/watch?v=hr5wqdVX4co&t=177s)
4. [3:41Créer une interaction au survol de la souris](https://www.youtube.com/watch?v=hr5wqdVX4co&t=221s)
5. [5:28Créer un effet de flou interactif sur du texte](https://www.youtube.com/watch?v=hr5wqdVX4co&t=328s)
6. [6:44Créer une animation de dégradé radial en boucle](https://www.youtube.com/watch?v=hr5wqdVX4co&t=404s)
7. [7:43Créer un effet de dégradé et de flou qui suit votre curseur](https://www.youtube.com/watch?v=hr5wqdVX4co&t=463s)

## Ressources associées

- [Circular BlurModèle](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)

## Présentation

- Hana
- 9 min
- Débutant

## À suivre

[Créer un interrupteur interactif avec flou progressif et dégradés4 minDébutant](https://spline.design/fr/academy/collections/hana-everything-you-need-to-know/create-an-interactive-switch-with-progressive-blur-and-gradients)[Continuer](https://spline.design/fr/academy/collections/hana-everything-you-need-to-know/create-an-interactive-switch-with-progressive-blur-and-gradients)

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

L’éditeur 3D et 2D pour les équipes et leurs agents. Publiez sur le web, iOS et Android.

#### Interrogez l’IA sur Spline

#### Produits

- [Design 3D](https://spline.design/fr/3d-design)
- [Hana](https://spline.design/fr/hana)
- [Omma](https://omma.build)
- [Génération 3D par IA](https://spline.design/fr/ai-generate)
- [Spline MCP](https://spline.design/fr/mcp)
- [Spline Arena](https://spline.design/fr/arena)
- [Tarifs](https://spline.design/fr/pricing)
- [Enterprise](https://spline.design/fr/enterprise)

#### Runtimes

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

#### Apps

- [Télécharger](https://spline.design/fr/download)
- [Spline Mirror](https://spline.design/spline-mirror)
- [Télécharger Spline Mirror](https://spline.design/download-mirror)

#### Apprendre

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

#### Communauté

- [Communauté Spline](https://community.spline.design)
- [Blog](https://spline.design/fr/blog)
- [Nouveautés](https://spline.design/fr/changelog)
- [Éducation](https://spline.design/fr/education)
- [Contra](https://spline.design/contra)
- [Affiliation](https://spline.design/fr/affiliate)

#### Entreprise

- [Clients](https://spline.design/fr/customers)
- [Carrières](https://www.ycombinator.com/companies/spline/jobs)
- [Sécurité](https://spline.design/fr/security)

#### Mentions légales

- [Conditions générales](https://spline.design/terms)
- [Confidentialité](https://spline.design/privacy)

#### Contact

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

© 2026 - Spline, Inc.