> For the complete documentation index, see [llms.txt](https://infinitode-docs.gitbook.io/documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://infinitode-docs.gitbook.io/documentation/package-documentation/blurjs-package-documentation/blurjs-reference-documentation.md). # 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` | | `mix-blend-mode` | `blur-mix-blend-mode` | Sets how the blur blends with content behind it. `no default assigned` | | `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, scale` | `blur-scale` | The value to scale to. If present triggers a scale animation to that value. Uses the independent CSS `scale` property. `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` | | | `blur-scale-delay` | Optional delay before the scale animation. Accepts a CSS time value. `no default assigned` | | `animation, rotate` | `blur-rotate` | The angle to rotate to. If present triggers a rotation animation. Uses the independent CSS `rotate` property. `no default assigned` | | | `blur-rotate-duration` | Optional duration value for the rotation animation. `no default assigned` | | | `blur-rotate-repetitions` | Optional repetitions value for the rotation animation. `no default assigned` | | | `blur-rotate-timing` | Optional timing value for the rotation animation. `default linear` | | | `blur-rotate-delay` | Optional delay before the rotation animation. Accepts a CSS time value. `no default assigned` | | `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` | | | `blur-translate-x-delay` | Optional delay before the translation animation. Accepts a CSS time value. `no default assigned` | | `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` | | | `blur-translate-y-delay` | Optional delay before the translation animation. Accepts a CSS time value. `no default assigned` | | `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` | | | `blur-opacity-delay` | Optional delay before the opacity animation. Accepts a CSS time value. `no default assigned` | | `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` | | | `blur-animate-delay` | Optional delay before the blur animation. Accepts a CSS time value. `no default assigned` | | `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). | | `style` | `blur-custom` | Allows for custom CSS to be added to the blur element. `no default assigned` | {% hint style="info" %} Animation delays are available for scale, rotate, translate, opacity, and blur animations. {% endhint %}