# Progetta effetti interattivi con sfocatura progressiva e gradienti morbidi - Spline Academy (https://spline.design/it/academy/tutorials/design-interactive-effects-with-progressive-blur-and-smoothing-gradients)

> In questo tutorial esploriamo diversi stili e tecniche per creare design morbidi e raffinati con gradienti sfumati e sfocatura progressiva, e come…

1. [Academy](https://spline.design/it/academy)
2. [Tutorial](https://spline.design/it/academy/tutorials)
3. Progetta effetti interattivi con sfocatura progressiva e gradienti morbidi

# Progetta effetti interattivi con sfocatura progressiva e gradienti morbidi

HanaPrincipiante9 min

In questo tutorial esploriamo diversi stili e tecniche per creare design morbidi e raffinati con gradienti sfumati e sfocatura progressiva, e come trasformarli in esperienze interattive in Hana.

Inizieremo spiegando come aggiungere gradienti ed effetti di sfocatura alle forme, poi passeremo alla creazione di elementi interattivi come animazioni hover, effetti che seguono il cursore, animazioni in loop e sfocature a più livelli. Tutto pronto da incorporare nel tuo progetto web, senza scrivere codice! 👌

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

## Cosa imparerai

1. [0:00Introduzione](https://www.youtube.com/watch?v=hr5wqdVX4co&t=0s)
2. [0:15Un design semplice con i gradienti](https://www.youtube.com/watch?v=hr5wqdVX4co&t=15s)
3. [2:57Aggiungere la sfocatura del livello](https://www.youtube.com/watch?v=hr5wqdVX4co&t=177s)
4. [3:41Creare un’interazione Mouse Hover](https://www.youtube.com/watch?v=hr5wqdVX4co&t=221s)
5. [5:28Creare un effetto di sfocatura interattivo sul testo](https://www.youtube.com/watch?v=hr5wqdVX4co&t=328s)
6. [6:44Creare un’animazione in loop di un gradiente radiale](https://www.youtube.com/watch?v=hr5wqdVX4co&t=404s)
7. [7:43Creare un effetto di gradiente e sfocatura che segue il cursore](https://www.youtube.com/watch?v=hr5wqdVX4co&t=463s)

## Risorse correlate

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

## Panoramica

- Hana
- 9 min
- Principiante

## Parte di

- [Hana | Tutto quello che devi sapere](https://spline.design/it/academy/collections/hana-everything-you-need-to-know/design-interactive-effects-with-progressive-blur-and-smoothing-gradients)

## Tutorial correlati

[Tutti i tutorial](https://spline.design/it/academy/tutorials)

[Crea un interruttore interattivo con sfocatura progressiva e gradientiHanaPrincipiante4 min](https://spline.design/it/academy/tutorials/create-an-interactive-switch-with-progressive-blur-and-gradients)[Crea materiali liquid glass in 3DSpline 3DPrincipiante12 min](https://spline.design/it/academy/tutorials/create-liquid-glass-materials-in-3d)[Come creare visualizzazioni di dati 3D in Spline con variabili e API in tempo realeSpline 3DAvanzato15 min](https://spline.design/it/academy/tutorials/how-to-create-3d-data-visualizations-in-spline-using-variables-and-real-time-apis)

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

L’editor 3D e 2D per i team e i loro agenti. Pubblica sul web, su iOS e su Android.

#### Chiedi all’IA informazioni su Spline

#### Prodotti

- [Design 3D](https://spline.design/it/3d-design)
- [Hana](https://spline.design/it/hana)
- [Omma](https://omma.build)
- [Generazione 3D con IA](https://spline.design/it/ai-generate)
- [Spline MCP](https://spline.design/it/mcp)
- [Spline Arena](https://spline.design/it/arena)
- [Prezzi](https://spline.design/it/pricing)
- [Enterprise](https://spline.design/it/enterprise)

#### Runtime

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

#### App

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

#### Impara

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

#### Community

- [Community di Spline](https://community.spline.design)
- [Blog](https://spline.design/it/blog)
- [Novità](https://spline.design/it/changelog)
- [Istruzione](https://spline.design/it/education)
- [Contra](https://spline.design/contra)
- [Affiliazione](https://spline.design/it/affiliate)

#### Azienda

- [Clienti](https://spline.design/it/customers)
- [Lavora con noi](https://www.ycombinator.com/companies/spline/jobs)
- [Sicurezza](https://spline.design/it/security)

#### Note legali

- [Termini e condizioni](https://spline.design/terms)
- [Privacy](https://spline.design/privacy)

#### Contatti

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

© 2026 - Spline, Inc.