# Concevoir des effets interactifs avec flou progressif et dégradés doux - 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. [Tutoriels](https://spline.design/fr/academy/tutorials)
3. Concevoir des effets interactifs avec flou progressif et dégradés doux

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

HanaDé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

## Fait partie de

- [Hana | Tout ce qu’il faut savoir](https://spline.design/fr/academy/collections/hana-everything-you-need-to-know/design-interactive-effects-with-progressive-blur-and-smoothing-gradients)

## Tutoriels associés

[Tous les tutoriels](https://spline.design/fr/academy/tutorials)

[Créer un interrupteur interactif avec flou progressif et dégradésHanaDébutant4 min](https://spline.design/fr/academy/tutorials/create-an-interactive-switch-with-progressive-blur-and-gradients)[Créer des matériaux Liquid Glass en 3DSpline 3DDébutant12 min](https://spline.design/fr/academy/tutorials/create-liquid-glass-materials-in-3d)[Créer des visualisations de données 3D dans Spline avec des variables et des API en temps réelSpline 3DAvancé15 min](https://spline.design/fr/academy/tutorials/how-to-create-3d-data-visualizations-in-spline-using-variables-and-real-time-apis)

[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.