blur

API reference for the blur transition in Svelte

Animates a blur filter alongside an element’s opacity. Creates a smooth blur effect as the element transitions in or out.

Usage

<script>
	import { blur } from 'svelte/transition';
</script>

<div transition:blur>blurs in and out</div>

<div in:blur>blurs in</div>

<div out:blur>blurs out</div>

Parameters

delay · number · default: "0"

Milliseconds before starting the transition

duration · number · default: "400"

Duration of the transition in milliseconds

easing · function · default: "cubicInOut"

An easing function that controls the animation curve

amount · number | string · default: "5"

The blur amount. Can be a number (pixels) or a CSS length string (e.g., ‘10px’, ‘1rem’)

opacity · number · default: "0"

The target opacity value (between 0 and 1) when the element is fully transitioned out

Example with parameters

<script>
	import { blur } from 'svelte/transition';
</script>

<div transition:blur={{ amount: 10, duration: 600 }}>
	blurs with stronger effect
</div>

<div transition:blur={{ amount: '2rem', opacity: 0.5 }}>
	blurs to semi-transparent
</div>