# Create an Interactive Switch with Progressive Blur and Gradients (https://academy.spline.design/tutorials/create-an-interactive-switch-with-progressive-blur-and-gradients)

> A video tutorial from the Spline Academy.

- Product: Hana (2D)
- Level: beginner
- Duration: 3 min 53 s
- Published: 2025-06-17
- Video: https://www.youtube.com/watch?v=a-fKAlKbuP4
- 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 show you how to create an interactive switch made 100% in Hana using progressive blur + gradients, and a mouse hover event for the interaction. It's an interesting design that can be used in a variety of projects, and we'll walk you through each step.

Remix this demo here: https://app.spline.design/ui/f7cc3864-707e-492a-8148-0e1ea37be1d3

## Chapters

- [0:00](https://www.youtube.com/watch?v=a-fKAlKbuP4&t=0s) Intro
- [0:15](https://www.youtube.com/watch?v=a-fKAlKbuP4&t=15s) Creating the base shape
- [0:39](https://www.youtube.com/watch?v=a-fKAlKbuP4&t=39s) Adding a gradient
- [1:04](https://www.youtube.com/watch?v=a-fKAlKbuP4&t=64s) Adding a layer blur effect
- [1:46](https://www.youtube.com/watch?v=a-fKAlKbuP4&t=106s) Creating triggers
- [1:57](https://www.youtube.com/watch?v=a-fKAlKbuP4&t=117s) Adding the mouse hover event + transitions
- [2:24](https://www.youtube.com/watch?v=a-fKAlKbuP4&t=144s) Creating the white stroke + adding states
- [3:07](https://www.youtube.com/watch?v=a-fKAlKbuP4&t=187s) Setting transitions for the stroke
- [3:35](https://www.youtube.com/watch?v=a-fKAlKbuP4&t=215s) Ending

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