---
description: >-
  This page details all of the available properties to change/apply using
  BlurJS.
---

# BlurJS Reference Documentation

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

{% hint style="info" %}
Coming soon: More properties for BlurJS interactions...
{% endhint %}
