# Design Interactive Effects with Progressive Blur and Smoothing Gradients (https://academy.spline.design/collections/hana-everything-you-need-to-know/design-interactive-effects-with-progressive-blur-and-smoothing-gradients)

> A video tutorial from the Spline Academy.

- Product: Hana (2D)
- Level: beginner
- Duration: 9 min 23 s
- Published: 2025-05-29
- Video: https://www.youtube.com/watch?v=hr5wqdVX4co
- Part of: [Hana | Everything You Need To Know](https://academy.spline.design/collections/hana-everything-you-need-to-know.md)

## About this tutorial

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

## Chapters

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

## Related documentation

- [Effects in Hana](https://docs.spline.design/hana-a-canvas-for-interactivity/effects-in-hana)
- [Interactivity in Hana](https://docs.spline.design/hana-a-canvas-for-interactivity/interactivity-in-hana)