# Design Interactive Effects with Progressive Blur and Smoothing Gradients - Spline Academy (https://spline.design/academy/tutorials/design-interactive-effects-with-progressive-blur-and-smoothing-gradients)

> In this tutorial, we’ll explore various styles and techniques for creating soft, sophisticated designs using smooth gradients and progressive blur, and how…

1. [Academy](https://spline.design/academy)
2. [Tutorials](https://spline.design/academy/tutorials)
3. Design Interactive Effects with Progressive Blur and Smoothing Gradients

# Design Interactive Effects with Progressive Blur and Smoothing Gradients

HanaBeginner9 min

In this tutorial, we’ll explore various styles and techniques for creating soft, sophisticated designs using smooth gradients and progressive blur, and how to transform them into interactive experiences in Hana.

We’ll start by explaining how to add gradients and blur effects to shapes, then move on to creating interactive elements like hover animations, cursor-following effects, looping animations, and layered blur effects. All of this is ready to be embedded into your web project, no coding needed! 👌

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

## What you’ll learn

1. [0:00Intro](https://www.youtube.com/watch?v=hr5wqdVX4co&t=0s)
2. [0:15Simple design with gradients](https://www.youtube.com/watch?v=hr5wqdVX4co&t=15s)
3. [2:57Adding layer blur](https://www.youtube.com/watch?v=hr5wqdVX4co&t=177s)
4. [3:41Creating a mouse hover interaction](https://www.youtube.com/watch?v=hr5wqdVX4co&t=221s)
5. [5:28Creating an interactive blur effect on text](https://www.youtube.com/watch?v=hr5wqdVX4co&t=328s)
6. [6:44Creating a looping radial gradient animation](https://www.youtube.com/watch?v=hr5wqdVX4co&t=404s)
7. [7:43Creating a gradient and blur effect that follows your cursor](https://www.youtube.com/watch?v=hr5wqdVX4co&t=463s)

## Related resources

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

## Overview

- Hana
- 9 min
- Beginner

## Part of

- [Hana | Everything You Need To Know](https://spline.design/academy/collections/hana-everything-you-need-to-know/design-interactive-effects-with-progressive-blur-and-smoothing-gradients)

## Related tutorials

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

[Create an Interactive Switch with Progressive Blur and GradientsHanaBeginner4 min](https://spline.design/academy/tutorials/create-an-interactive-switch-with-progressive-blur-and-gradients)[Create Liquid Glass Materials in 3DSpline 3DBeginner12 min](https://spline.design/academy/tutorials/create-liquid-glass-materials-in-3d)[How to Create 3D Data Visualizations in Spline Using Variables and Real-Time APIsSpline 3DAdvanced15 min](https://spline.design/academy/tutorials/how-to-create-3d-data-visualizations-in-spline-using-variables-and-real-time-apis)

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

The 3D and 2D editor for teams and their agents. Ship to the web, iOS and Android.

#### Ask AI about Spline

#### Products

- [3D Design](https://spline.design/3d-design)
- [Hana](https://spline.design/hana)
- [Omma](https://omma.build)
- [AI 3D Generation](https://spline.design/ai-generate)
- [Spline MCP](https://spline.design/mcp)
- [Pricing](https://spline.design/pricing)
- [Enterprise](https://spline.design/enterprise)

#### Runtimes

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

#### Apps

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

#### Learn

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

#### Community

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

#### Company

- [Customers](https://spline.design/customers)
- [Careers](https://www.ycombinator.com/companies/spline/jobs)
- [Security](https://spline.design/security)

#### Legal

- [Terms & Conditions](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.