BlurJS Reference Documentation

This page details all of the available properties to change/apply using BlurJS.

All of these properties are directly mapped to the corresponding CSS property, which gives you extra functionality to create advanced blur effects using the vanilla CSS styles.

Vanilla CSS Property	BlurJS Property	Description
width	blur-width	Sets the width of the blur. default 50px
height	blur-height	Sets the height of the blur. default 50px
filter: blur(amount)	blur-amount	Sets the amount of blur. default 25px
background	blur-background	Sets the color/background of the blur (gradients can also be used). default red
z-index	blur-z-index	Sets the Z Index of the blur. default 99
top	blur-top	Positions the blur from the top. default 0
left	blur-left	Positions the blur from the left. default 0
right	blur-right	Positions the blur from the right. no default assigned
bottom	blur-bottom	Positions the blur from the bottom. no default assigned
border-radius	blur-border-radius	Changes the blur border radius. default 5rem 2rem 5rem 50%
background (svg)	blur-grain	Must be set to true in order to work. Sets the blur to a grainy texture. no default assigned
animation, transform	blur-scale	The value to scale to. If present triggers a scale animation to that value. no default assigned
	blur-scale-duration	Optional duration value for the scale animation. no default assigned
	blur-scale-repetitions	Optional repetitions value for the scale animation. no default assigned
	blur-scale-timing	Optional timing value for the scale animation. default linear
animation, transform	blur-translate-x	The value to translate on the x-axis. If present triggers a translation animation to that value. no default assigned
	blur-translate-x-duration	Optional duration value for the translation animation. no default assigned
	blur-translate-x-repetitions	Optional repetitions value for the translation animation. no default assigned
	blur-translate-x-timing	Optional timing value for the translation animation. default linear
animation, transform	blur-translate-y	The value to translate on the y-axis. If present triggers a translation animation to that value. no default assigned
	blur-translate-y-duration	Optional duration value for the translation animation. no default assigned
	blur-translate-y-repetitions	Optional repetitions value for the translation animation. no default assigned
	blur-translate-y-timing	Optional timing value for the translation animation. default linear
animation, opacity	blur-opacity	The value to animate on the opacity property. If present triggers a opacity animation to that value. no default assigned
	blur-opacity-duration	Optional duration value for the opacity animation. no default assigned
	blur-opacity-repetitions	Optional repetitions value for the opacity animation. no default assigned
	blur-opacity-timing	Optional timing value for the opacity animation. default linear
animation, filter	blur-animate	The value to transition to. Transitions from the blur-amount value and this value. If present triggers a blur animation to that value. no default assigned
	blur-animate-duration	Optional duration value for the blur animation. no default assigned
	blur-animate-repetitions	Optional repetitions value for the blur animation. no default assigned
	blur-animate-timing	Optional timing value for the blur animation. default linear
pointer-events	blur-pointer-events	Optional value for pointer events. Choose from true or false. This allows either all or none.
user-select	blur-user-select	Optional value for user selection. Choose from true or false. This allows either auto or none.
animation, filter	blur-interaction	Optional value for toggling animations. Choose from scroll (triggers when in the viewport), click (toggles animation on click) and hover (trigger when hovering on element).

Coming soon: More properties for BlurJS interactions...