# Créer un interrupteur interactif avec flou progressif et dégradés - Spline Academy (https://spline.design/fr/academy/tutorials/create-an-interactive-switch-with-progressive-blur-and-gradients)

> Dans ce tutoriel, nous vous montrons comment créer un interrupteur interactif réalisé à 100 % dans Hana avec un flou progressif, des dégradés et un…

1. [Academy](https://spline.design/fr/academy)
2. [Tutoriels](https://spline.design/fr/academy/tutorials)
3. Créer un interrupteur interactif avec flou progressif et dégradés

# Créer un interrupteur interactif avec flou progressif et dégradés

HanaDébutant4 min

Dans ce tutoriel, nous vous montrons comment créer un interrupteur interactif réalisé à 100 % dans Hana avec un flou progressif, des dégradés et un événement de survol de la souris pour l’interaction. C’est un design intéressant, utilisable dans toutes sortes de projets, et nous vous guidons à chaque étape.

Remixez cette démo ici : <https://app.spline.design/ui/f7cc3864-707e-492a-8148-0e1ea37be1d3>

## Ce que vous allez apprendre

1. [0:00Intro](https://www.youtube.com/watch?v=a-fKAlKbuP4&t=0s)
2. [0:15Créer la forme de base](https://www.youtube.com/watch?v=a-fKAlKbuP4&t=15s)
3. [0:39Ajouter un dégradé](https://www.youtube.com/watch?v=a-fKAlKbuP4&t=39s)
4. [1:04Ajouter un effet de flou de calque](https://www.youtube.com/watch?v=a-fKAlKbuP4&t=64s)
5. [1:46Créer les déclencheurs](https://www.youtube.com/watch?v=a-fKAlKbuP4&t=106s)
6. [1:57Ajouter l’événement de survol de la souris et les transitions](https://www.youtube.com/watch?v=a-fKAlKbuP4&t=117s)
7. [2:24Créer le contour blanc et ajouter des états](https://www.youtube.com/watch?v=a-fKAlKbuP4&t=144s)
8. [3:07Définir les transitions du contour](https://www.youtube.com/watch?v=a-fKAlKbuP4&t=187s)
9. [3:35Fin](https://www.youtube.com/watch?v=a-fKAlKbuP4&t=215s)

## Ressources associées

- [Progressive SwitchModèle](https://app.spline.design/academy/tutorials/create-an-interactive-switch-with-progressive-blur-and-gradients?redirect-duplicate-template-uuid=e28be289-db51-434b-8bc6-772f993823a8&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
- 4 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/create-an-interactive-switch-with-progressive-blur-and-gradients)

## Tutoriels associés

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

[Concevoir des effets interactifs avec flou progressif et dégradés douxHanaDébutant9 min](https://spline.design/fr/academy/tutorials/design-interactive-effects-with-progressive-blur-and-smoothing-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.